[BUG] - Framer Motion Reorder with Mantine Tabs

[Christoffer-Toft]

1. Read the FAQs 👇

2. Describe the bug

Tabs/Reorder items get scrambled when dragged when axis=x and parent width limits items so they show on two lines. (See code sandbox).

Give a clear and concise description of what the bug is.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/mantine-react-template-forked-32sx8n

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to code sandbox sample
2. Drag any of the items to the left
3. See error. The items will be scrambled. if the div width is adjusted to 100% to make the items appear on one line, it will work as expected.

5. Expected behavior
Moving items should not garble the other items and mess up the layout. Hard to describe but its pretty obvious something is breaking here.

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

Chrome Version 131.0.6778.204
Linux Ubuntu 24.04
See dependencies versions in codebox sample

I'd like some suggestions to how to get around this issue. In my live code, users can dynamically add and remove tabs which might result in several rows of tabs. I'd like to be able to reorder across several lines if possible without the layout breaking.

[Christoffer-Toft]

Visualisation of what happens:

Screencast.from.2025-01-31.11-07-40.mp4