Remove browser styled scrollbar from Tabs component

[sirrah-tam]

This change: (check at least one)

• [ ] Adds a new feature
• [x] Fixes a bug
• [ ] Improves maintainability
• [ ] Improves documentation
• [ ] Is a release activity

Is this a breaking change? (check one)

• [ ] Yes
• [x] No

Is the: (complete all)

• [x] Title of this pull request clear, concise, and indicative of the issue number it addresses, if any?
• [x] Test suite(s) passing?
• [ ] Code coverage maximal?
• [x] Changeset added?
• [x] Component status page up to date?

What does this change address? The update for the Tabs that allowed for horizontal scrolling causes a scroll bar to appear, even when there isn't a need for one. This added unnecessary padding just below the tabs to all instances of this pattern. These are styled slightly different in each browser as the browser applies its own styles. Below is an example from a Chromium browser.

How does this change work? Adding a style for the .tab__list element that sets the scrollbar-width to none.

Additional context I confirmed that touch (mobile) users are still be able to tap and drag to scroll, mouse users will be required to scroll horizontally (either by the scroll wheel moving left/right or by holding down Shift and using the mouse scrollwheel) but won’t be able to click and drag, and keyboard-only users will still be able to tab through without hassle.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 44554d52937ee3a86bbb10d63725d88a0c966702

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@ithaka/pharos	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/pharos/lib/index.js	64.42 KB (-0.01% 🔽)

[daneah]

@sirrah-tam does this interfere with macOS users who have their system settings intentionally set to always show scroll bars?

[sirrah-tam]

@sirrah-tam does this interfere with macOS users who have their system settings intentionally set to always show scroll bars?

It does in fact! That is a good catch and a TIL moment for me. After a bit more testing across browsers and OSs, it seems like we may not have a lot to do about this, and using the style as proposed would effectively hide the scroll bar for all users.

It appears Safari on macOS doesn't show the scroll bar until its needed at that horizontal width, but both Chrome & Firefox will always show it when setting the system settings for scroll bars to "Automatically based on mouse or trackpad" and (obvs) "Always". When setting it to "When scrolling", the scroll bar does not appear unless the user scrolls

On Windows there is only the option to Always show the scroll bar or not, and not that 3rd option. Testing here finds that Firefox doesn't show it until it's necessary while Edge/Chrome always shows it regardless of horizontal width.

Will close this PR unless a case is made that we remove the visual scroll bar altogether.