[BUG] Tabs weird scroll issue

[vladoyoung]

Describe the bug This might be a issue cause by combining Resizable + Tabs , but the following code in the TabsItem.tsx file seem to be causing an issue when scrollIntoView is triggered with inline: "center":

if (!shouldScroll) return;
itemRef.current?.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });

Removing inline: "center" so it looks like the following code fixes the issue:

itemRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });

To Reproduce I can't properly make a reproducible sandbox, but here are some screen captures:

On this one you can see the Resizable + Tabs combination and how the tab contents get shifted when you toggle some of the last tab items. https://github.com/user-attachments/assets/5b9052fe-7666-4b1b-8778-5456aac285f0

This is not an issue caused by the contents of the tab panel, because you can see the same component used on another page with a different layout, without Resizable: https://github.com/user-attachments/assets/ba10c66f-2510-42d4-aeb2-4b641c64413b

I've also noticed that on the first page I get the chevron buttons, but on the other one I do not. I could not figure out why exactly this happens when looking at the code, but it's not an issue now.

I will probably wait for your response as there might be another approach to fixing this instead of me tweaking the source code and removing inline: "center"

This might be difficult to reproduce on your side, so let me know if you need anything else from my side.

[blvdmitry]

Thanks for reporting, I'll try to reproduce this on my side. Currently this logic is responsible for making the clicked tab fully visible especially when there are more tabs coming after it. Chevrons appear for the m+ viewport sizes when the items don't fit, which I think can be improved too:

• [x] Reproduce scrollIntoView bug
• [x] Update the chevron buttons design to only use an Actionable with an icon + fade
• [x] Only show chevrons for mouse pointer mq

[blvdmitry]

Reproduced it and fixed it with a custom scrolling logic instead of using the native one to avoid the side-effects

https://github.com/user-attachments/assets/c2032070-529d-454b-8f72-d56ac79ae008

Going to release a patch and an updated source code tomorrow so you can try it out on monday

[blvdmitry]

Available in 3.2.7, source code is on the website too

[vladoyoung]

Works like a charm!