Improve tab bar overflow: hide scrollbar, pin + button, auto-scroll, overflow indicators #150
Description
Summary
Improve the tab bar UX when there are more tabs than fit on screen:
- Hide the native scrollbar — the tab bar should still be horizontally scrollable (e.g. via mouse wheel, trackpad, or touch) but the scrollbar itself should not be visible.
- Pin the "+" (new tab) button — it must always be visible at the right edge of the tab bar, never scrolling offscreen with the tabs.
- Auto-scroll to active tab — when a tab gains focus/activates, scroll the tab bar so that tab is in view and as close to center as possible. The user can still manually scroll away from it afterward.
- Overflow indicators — add a visual treatment (e.g. fade/gradient, subtle arrow, shadow) on the left and/or right edge of the tab bar to indicate "more tabs offscreen in this direction." Only show each indicator when there are actually tabs overflowing on that side.
Motivation
With many tabs open the current tab bar becomes hard to navigate — the scrollbar is visually noisy, the + button can scroll out of reach, and there's no indication that more tabs exist offscreen.
Acceptance Criteria
- Native horizontal scrollbar is hidden on the tab bar (scroll functionality preserved)
- The "+" new-tab button is pinned outside the scrollable area, always visible
- When a tab activates, the tab bar auto-scrolls to center it (or as close to center as possible)
- Left and/or right overflow indicators appear when tabs are clipped on that side
- Overflow indicators disappear when the tab bar is scrolled to that edge (no more tabs offscreen)
- Keyboard and mouse-wheel horizontal scrolling still works
- Unit and integration tests cover overflow indicator visibility logic and auto-scroll behavior
- Accessible: overflow indicators are decorative (not interactive), + button remains keyboard-reachable