Item 1 — /account tab overflow on narrow screens

8 icon+label tabs (Personal Calls / Campaign Calls / Callbacks / Appointments / Messages / Security / My Numbers / Usage) overflow below ~lg breakpoint. Pick one mechanism. Mockups simulate ~540px viewport (the bad case).

Variant A

Horizontal scroll

Recommended

Tabs keep label + icon; row scrolls horizontally. Native iOS/Android tab pattern.

~540px viewport

← scroll to see Security / My Numbers / Usage →

Pros

  • All labels stay readable
  • Zero JS — pure CSS overflow-x:auto
  • Discoverable: visible scroll cue + native touch scroll

Cons

  • Desktop users with narrow window must scroll laterally
  • Off-screen tabs invisible at rest
Variant B

Icon-only collapse below md

Drop labels under md breakpoint. Icons fit all 8 tabs in one row. Tooltip-on-hover for labels.

~540px viewport

Hover for label. Active tab still shows full label (optional).

Pros

  • All tabs visible — no hidden state
  • Compact, modern

Cons

  • Two icons ambiguous (Personal Calls vs Campaign Calls — both phone)
  • Tooltip dependence = bad on touch
  • Need disambiguating icon set
Variant C

Visible tabs + "More" dropdown

Top N tabs visible, rest collapsed into "More ▾" menu. Count adapts to viewport.

~540px viewport
📅 Appointments
💬 Messages
🛡️ Security
#  My Numbers
📊 Usage

Pros

  • Clean single-row look
  • No horizontal scroll

Cons

  • Active tab in dropdown = invisible until opened
  • Adaptive cutoff logic non-trivial (ResizeObserver + measurement)
  • Two click depths for half the tabs
  • shadcn Tabs primitive doesn't ship this — custom build