Responsive tabs on desktop

[dani-moreno]

Description

This PR updates the Tabs component to be responsive. It handles overflow by moving excess tabs into a dropdown menu when there isn't enough space to display all tabs horizontally.

Features

• Shows all tabs on mobile (they can be scrolled horizontally)
• On desktop (md breakpoint and above), implements an overflow logic (as scrolling horizontally is not a common gesture in desktop)
• Uses a "More" dropdown when tabs don't fit in the container

Tab visibility logic

The important part of this PR is this logic. This is how it works:

1. Width calculation

• Measures the tab widths once
• Caches measurements
• Calculates available space by subtracting "More" button and padding from container width

2. Tab display

• Visible tabs are rendered directly in the navigation
• Overflow tabs are placed in a dropdown menu
• Updates layout only when necessary

Screenshots

Screen.Recording.2024-12-17.at.11.13.08.mov

---

Type of Change

• New experimental component
• Promote component from experimental to stable
• Maintenance / Bug Fix / Other

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook