Scrollable tabs

[atmgrifter00]

Pull Request

🤨 Rationale

• Scrollable tabs #1509

👩‍💻 Implementation

Adding buttons to template which will show/hide based on width of the container for the tabs either exceeding visible area or not. Layout of tabs is now using flex instead of grid (the original use of grid wasn't clear to me).

ResizeObserver vs IntersectionObserver

I currently have opted to use a ResizeObserver for controlling when to show/hide the scroll buttons. The reason for this is two-fold:

1. The observer only fires when the contentRect for the element containing the tabs changes. This will occur if the Tabs component changes its width, when tabs or added or removed (if all tabs are visible), or when the content of a tab is changed (when all tabs are visible), all of which are valid conditions to re-evaluate whether we need to show or hide the scroll buttons.
2. The implementation is easy to reason about, and there is no extra state necessary.

Two different approaches were used/attempted with the IntersectionObserver. The first involved observing each Tab element. While this worked, the implementation was cumbersome and harder to reason about, as it involved extra state that the Tabs component had to maintain (a map that tracked which tabs were currently visible or not), and "calculating" the visible condition from the state kept in the map. This was required to handle cases such as removing the last tab, where it was only partially visible (and thus was currently showing the scroll buttons), which, when removed, the IntersectionObserver would only report a change for the removed tab, but the visibility should still be updated.

The other approach attempted was trying to simply observe the container element of the tabs (whose root was simply its containing element), which wouldn't have required any extra state. However, this requires the observer to fire both when the container element becomes partially visible and when it becomes fully visible. Supplying thresholds of [0, 1] (one pixel and 100% visible), or only 0, did not result in the needed behavior. It would simply fire once, and then never again.

🧪 Testing

Added unit tests, and matrix tests.

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.