search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
115 stars 3 forks source link

[BUG] Tabs weird scroll issue #348

Open vladoyoung opened 1 day ago

vladoyoung commented 1 day ago

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 commented 1 day ago

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: