Skip to content

PROJ-670: ProjectNav Priority+ More menu for mobile tab overflow - #297

Merged
TAJD merged 1 commit into
mainfrom
wt/proj-670
Aug 24, 2026
Merged

PROJ-670: ProjectNav Priority+ More menu for mobile tab overflow#297
TAJD merged 1 commit into
mainfrom
wt/proj-670

Conversation

@TAJD

@TAJD TAJD commented Aug 24, 2026

Copy link
Copy Markdown
Owner

Summary

  • Replaces the mobile horizontal-scroll tab bar in ProjectNav with a Priority+ pattern: as many leading tabs are shown as fit the available width, with the rest collapsed into a "More ▾" menu.
  • Measures each tab's natural width once (labels are static) and the nav container's width via ResizeObserver (falls back to showing all tabs if measurement is unavailable, e.g. containerWidth is 0 — this also keeps existing/unstubbed tests passing unchanged).
  • If the active tab has overflowed into the menu, the "More" trigger gets aria-current="true" and active styling so the current section is still indicated.
  • Menu items are ≥44px tall tap targets, the trigger exposes aria-haspopup="menu"/aria-expanded, and the menu closes on selection, outside click, and Escape (focus returns to the trigger).
  • Removed the old max-sm:overflow-x-auto horizontal scroll class — no more horizontal scrolling of the tab row at any width.

Design decisions

  • Widths are measured once on mount (tab labels are static/fixed) rather than continuously, avoiding a remeasure-after-hide correctness bug (a display:none element reports 0 width in real browsers).
  • The "More" trigger's own width is a fixed reserve constant rather than measured, since it only ever renders once other tabs are already hidden (avoiding a chicken-and-egg measurement problem).
  • Tests stub clientWidth/offsetWidth on HTMLElement.prototype (jsdom doesn't compute real layout) to exercise the overflow math deterministically — see stubNavMeasurements in ProjectNav.test.tsx.

Test plan

  • pnpm --filter @projektor/web test — all 680 tests pass (15 in ProjectNav.test.tsx, including 5 new Priority+ overflow tests)
  • pnpm --filter @projektor/web test:coverage — passes
  • pnpm turbo type-check --filter=@projektor/web — 0 errors
  • pnpm biome check on changed files — clean
  • pnpm --filter @projektor/web build — succeeds
  • Manual check at iPhone-width viewport — not performed this session (browser automation tooling unavailable/unauthenticated); relying on the automated viewport/overflow-simulation tests instead.

Closes PROJ-670.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BjWZ86u91ZXsmGKoWC8vbx

…y+ More menu (PROJ-670)

Measures the nav row and each tab's natural width once, then shows as many leading
tabs as fit with the rest collapsed into a "More ▾" menu (ResizeObserver-driven,
no scroll). Highlights the More trigger when the active tab has overflowed into it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BjWZ86u91ZXsmGKoWC8vbx
@TAJD
TAJD merged commit b3efd97 into main Aug 24, 2026
1 check passed
@TAJD
TAJD deleted the wt/proj-670 branch August 24, 2026 20:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant