fix(crew): contain mobile route layouts

[zacjones93]

Summary

• wrap the Crew public header navigation below the brand/account row on narrow screens so account actions stay visible
• constrain the screen-only export packet table while preserving its nested horizontal scroller and automatic print layout
• add focused 390x844 Playwright coverage for Events, New event, all packet tabs, and print chrome/header behavior
• recapture the six affected desktop/mobile evidence scenarios at exact code revision 2333f9328338f20dc0423fc48a1031a812be4060

Verification

• focused responsive Playwright: 2 passed
• focused event-day packet Vitest: 1 passed
• full pre-push lint and type-check: passed
• page coverage freshness, evidence hashes, privacy scan, and orphan validation: passed
• lat check: passed

Evidence

Mobile /events and /events/new now measure 390px at a 390px viewport with the logout control fully visible. Mobile exports measures 390px at the document while its schedule scroller remains 358px wide with 484px of scrollable table content.

• main
  • feat(ui): consolidate Storybook and shared UI library #615
    • feat(ui): add shared package foundation #616
      • feat(ui): extract shared form and overlay primitives #617
        • Fix semantic contrast and Storybook Canvas themes #618
          • UI library: add exhaustive page coverage contract #619
            • UI Library Stack 06 — Public Entry Browser Evidence #620
              • Fix dark button hover contrast #621
                • Extract shared feedback and navigation primitives #622
                  • UI Library Stack 08 — Docs and Auxiliary App Evidence #623
                  • feat(ui): add auth entry composition #624
                  • docs(ui): capture protected athlete coverage #625
                  • fix(settings): render profile email outside form field #626
                  • fix(settings): render athlete stats outside form fields #627
                  • fix(series): render movement collection heading #628
                  • feat(ui): add field composition primitives #629
                  • docs(ui): capture Crew organizer coverage #630
                  • refactor(settings): adopt shared field composition #631
                  • fix(crew): contain mobile route layouts 👈
                  • fix(judges): compose rotation collection field group #633
                  • docs(ui): capture Crew admin coverage #634
                  • fix(scaling): compose levels field groups #635
                  • fix(registration): compose option field groups #636
                  • feat(ui): add empty state composition #637
                  • fix(crew): align token route accessibility #639
                  • docs(ui): capture Crew token and series coverage #638
                  • fix(start): correct organizer panel semantics #640
                  • refactor(ui): adapt organizer empty states #641
                  • fix(start): stabilize admin sidebar hydration #642
                  • fix(start): add admin dashboard heading hierarchy #643
                  • fix(start): correct demo competition semantics #644
                  • docs(ui): capture Start admin coverage #645
                  • refactor(ui): compose organizer empty states directly #646
                  • feat(ui): add metric composition #647
                  • refactor(crew): adopt shared Metric summaries #648
                  • refactor(ui): compose Crew preview metrics #649

---

Summary by cubic

Fixes mobile overflow in Crew and improves accessibility: the public header now wraps and names its navigation on small screens, and the Exports packet table stays within the viewport with its own horizontal scroller while preserving print. Adds shared @repo/ui/empty-state and @repo/ui/metric primitives and adopts them across empty panels and import previews.

• New Features

  • Introduced @repo/ui/empty-state and updated organizer empty states while keeping actions intact.
  • Added @repo/ui/metric and switched import preview summaries (heats, combined imports, volunteers, templates) to compact metric cards.
  • Grouped form collections with fieldsets/legends in judges, scaling, and registration editors for clearer semantics.

• Bug Fixes

  • Named navigation landmarks in root and series pages and aligned token flows for better screen-reader context.
  • Kept Exports content contained (min-w-0, table-fixed) without changing its printed layout.
  • Made demo seed dates derive from the event timezone (DST-safe), and stabilized Start admin sidebar/link state and heading hierarchy.
  • Added focused 390×844 @playwright/test for Events, New event, and Exports; expanded component tests and captured Crew admin and token/series evidence.

^{Written for commit d6316c1. Summary will update on new commits.}

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4784fe46-c17b-4353-8212-5efebaa21cf2

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/crew-mobile-overflow-fixes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[zacjones93]

Independent review receipt — exact head c32358fce09fb349b4c2b644f045f3675b8cade4

Verdict: changes requested (2 test/spec findings). The production CSS and recaptured evidence are otherwise sound and narrowly scoped.

Findings

1. [P2] Wait for each packet tab before asserting its layout. In the Judges/Shifts loop, the click is followed only by expectNoDocumentOverflow(). That condition is already true on the Schedule tab, while onTabChange performs an asynchronous TanStack navigation. The poll can therefore pass before the requested tab is selected or rendered, so the test does not reliably cover Judges or Shifts. Assert the clicked tab reaches aria-selected=true (or the matching URL/content) before checking overflow for each iteration.

2. [P2] Give each E2E behavior its own adjacent LAT spec reference. The file has one generic @lat comment at line 1 shared by two tests. Repository instructions require exactly one test-spec reference adjacent to each test and explicitly disallow top-of-file placement. Add distinct leaf specs for the mobile public-header behavior and the export containment/print behavior, then place one matching @lat beside each test.

Verified independently

• PR base/head and two-commit scope match 6b02bc9b1...c32358f; no overflow-hidden, domain/schema/server, or shared-sidebar changes.
• Root header preserves desktop navigation/account placement at lg and wraps navigation below the brand/account row on mobile.
• Export packet uses min-w-0 plus screen table-fixed / print table-auto; the nested table remains the horizontal scroll owner and the print thead contract is preserved.
• Focused packet Vitest passes; page-coverage currentness and lat check pass. My direct E2E rerun could not start its local web server in this disposable review runtime, but GitHub's Crew and sharded E2E jobs pass.
• All six recaptured scenarios are pinned to code commit 2333f9328338f20dc0423fc48a1031a812be4060.
• Recomputed all 109 manifest artifact hashes; 110 files including manifest, zero orphans, no absolute local paths or credential/header fields.
• Mobile Events/New event document width is 390px and logout is fully visible at x=334–374. Mobile Exports document width is 390px; internal schedule scroller is 358px client / 484px scroll width.
• Six recaptures have zero console errors and zero network responses >=400. Audit preserves initial e7ba19fa... provenance while recording the responsive findings as resolved. Ledger totals remain 166 verified / 26 blocked / 147 pending.
• At review time all completed PR checks pass; test (wodsmith-start) and merge-reports are still running. Base PR refactor(settings): adopt shared field composition #631 is fully green. CodeRabbit skipped because the PR is draft.

[zacjones93]

Independent follow-up review — exact head be3a52d5b144ab66f243bdfa8a25d378672fc4b4

Verdict: LGTM — both prior findings are resolved. No new findings.

• The Judges/Shifts loop now waits for the target tab's aria-selected="true", the matching ?tab= search value, and tab-specific visible content (Lane / Volunteer) before asserting document containment. This closes the prior false-positive window from asynchronous route navigation.
• The generic file-scope @lat reference is gone. Each E2E test now has exactly one adjacent reference to its own matching leaf spec: Responsive public header and Export table containment and print layout. Both specs have concise behavioral descriptions, and lat check passes.
• The remediation commit changes only apps/crew/e2e/crew-responsive-layout.spec.ts and lat.md/ui-library.md. The cumulative PR remains the previously reviewed low-risk responsive CSS/evidence slice with no domain, server/schema, shared-sidebar, or overflow-hidden production changes.
• Focused E2E is reported green 2/2; current GitHub head is exact. At this receipt, Crew/Start lint, GitGuardian, and branch-stack checks pass; builds and E2E jobs are still running. CodeRabbit remains skipped because the PR is draft.