TabGroup with lots of tabs

[Josh-Nicholson]

I have a TabGroup element containing several tabs. As the screen size decreases, some of the tabs get cut off, even though I've reduced the padding for smaller screens.

The TabGroup element currently has a class named hide-scrollbar, which prevents the scrollbar from appearing.

Could you please advise on the best way to override this class and enable a scrollbar that matches the current theme of the TabGroup?

Thank you.

[endigo9740]

Hey @Josh-Nicholson, so the the tab group should still allow horizontal scrolling even if the scrollbar is not visually shown. I wanted to make sure that's clear upfront. Additionally, if you have so many tabs that it requires scrolling, you might consider swapping to a different interface for small screens. This is a common UX pattern.

Unfortunately, hide-scrollbar is currently baked into the component's base classes here:
https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/components/Tab/TabGroup.svelte#L54

This means there's not a trivial means for disabling this. We took a very opinionated stance with this in Skeleton v2, which I regret in hindsight. But it's worth noting this will not be the case in Skeleton v3. You'll have full reign over whether scrolling is used and displayed.

For now you have a few options:

1. Clone the TabGroup source code to your project, modify as desired, then opt for that version for now
2. Use Tailwind's arbitrary syntax to "reach into" the template children and try to overwrite the scrolling styles applied here using these styles
3. Consider sending a pull request that abstracts the hide-scrollbar class to a dedicated style prop, which would allow it to be easily overwritten by end users like yourself.

Just FYI, we're relying on community contributions for v2 right now, as we focus our efforts on Skeleton v3.

Note that we cannot disable this style outright as this is default behavior. Doing so would be considered a breaking change, which we reserve for major releases. Since v3 already solves this problem, this is essentially already in place.

If you need guidance around the contribution process, let me know.