When columns are thin and column spacing is set, items move from their grid position when clicked

[natle01]

Describe the bug

When a responsive layout has thin columns which are less than ~6% of the layout width, clicking on a layout item it will move it left (x position).

• margin column must be set.
• Thin columns can be created using any mixture of these properties containerPadding, margin, width, and cols.

Your Example Website or App

https://codesandbox.io/p/sandbox/quirky-artem-tmpkws

Steps to Reproduce the Bug or Issue

1. Set width: 800 pixels.
2. Set cols: {{ <yourbreakpoint>: 10 }}
   Currently columns are 80px wide (10% of the layout width)
3. Set margin: [40,0]
   Currently columns are 44px wide (5.5% of the layout width)

(Note. margin must be set)

Expected behavior

When a responsive layout item is clicked, it should not move.
Layout item should only move when it is dragged to another x or y position.

react-grid-layout library version

1.4.3

Operating System Version

Windows 11

Browser

Edge

Additional context

Similar to this bug #1924 When containerPadding is 0 and cols is large enough, clicking on the event will trigger onLayoutChange, causing the layout to move left

Screenshots or Videos

[AndreiAyar]

Same here. Any solution ?

[xuanxiaoxiao]

me too

[shamilium]

I have same issue.