fix(fairway): mobile composition — Action Items overflow, aspect drill-down sheet, Signals toolbar glass/cram, hero card sizing

[njrini99-code]

Fixes the five phone screenshots from the owner report (2026-07-18): unreadable "Who's contributing" drill-down, Action Items running past the screen edge, Signals toolbar bleed-through + clipped pills, evidence labels wrapping one word per line, and the full-viewport dashboard hero.

The real bug behind the screenshots

Every ModalShell dialog was collapsed on iPhone. The panel is h-fit; its body was flex-1 (percentage flex-basis). iOS Safari resolves that percentage against the intrinsic-keyword height as 0, so the body rendered ~0px tall — title + a clipped sliver of content + footer. Desktop engines size it from content, which is why QA never saw it. The screenshots' clipped chip strip is exactly this. Fixed at the primitive (flex-auto min-h-0) in both ModalShell.Body and Sheet.Body — so the drill-down's Sheet conversion doesn't re-ship the same collapse, and every other dialog (create task, event editor, invite player, penalty, travel, focus area…) is unbroken on iOS in one edit.

Per-surface

• Aspect drill-down ("Who's contributing") → bottom Sheet (vaul: drag handle, scrim, drag-to-dismiss), peek={false} like every production bottom sheet — the snap-point path has zero production consumers and assumes fixed-height content.
• Toolbar (Signals) at phone width → re-composed with order/basis: line 1 = search (grows) + compact actions; line 2 = ONE full-width horizontal scroll strip holding the view toggle and the filter pills (toggle renders in two homes, sm:hidden / hidden sm:block, so exactly one is ever displayed). No more "Sta…" clipping mid-word under a 280px trailing cluster. Stuck glass upgraded to --fw-glass-bg-strong (88%) so scrolled body copy can't read through the chrome. sm: and up byte-identical.
• Signals evidence grid → label⇄value rows below sm (native detail-list pattern); the 2×~150px column grid forced "ESTIMATED 3-PUTT RATE (15+ FT)" into one-word lines. 3-col grid unchanged from sm:.
• Action Items → min-w-0/overflow-hidden backstops through the row chain, plus overflow-x-clip on the dashboard page root: no wide sibling can ever stretch every full-width card past the viewport again (clip, not hidden — sticky children keep working).
• Dashboard hero → p-6/text-h3/text-body at phone width so the first viewport reads as a composed page, not one monolith card; sm: up unchanged.

Gates

• tsc --noEmit clean · eslint clean on all touched files
• vitest run src/components/fairway — 160 files / 1,468 tests green
• Toolbar regression test updated to the new composition + a new phone-composition test (strip is the full-width second line, hosts the toggle, single toggle displayed per breakpoint)

🤖 Generated with Claude Code

https://claude.ai/code/session_01MMdviLDsAg2YYJ8adsM6fg

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[supabase]

This pull request has been ignored for the connected project qmnssrrolpinvwjjnufo because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
helmv3	Ignored	Preview	Jul 18, 2026 5:14pm

[coderabbitai]

Warning

Review limit reached

@njrini99-code, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 7 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 68b6c600-1471-4b6f-b11a-074bfe4315f6

📥 Commits

Reviewing files that changed from the base of the PR and between 5002416 and f42f8ac.

📒 Files selected for processing (8)

• src/components/fairway/controls/Toolbar.test.tsx
• src/components/fairway/controls/Toolbar.tsx
• src/components/fairway/overlays/ModalShell.tsx
• src/components/fairway/overlays/Sheet.tsx
• src/components/fairway/pages/coachhelm/FairwayAspectDrillDown.tsx
• src/components/fairway/pages/coachhelm/FairwayCoachHelmSignals.tsx
• src/components/fairway/pages/dashboard/FairwayCoachDashboard.tsx
• src/components/fairway/pages/dashboard/FairwayPlayerDashboard.tsx

Walkthrough

Fairway UI updates refine mobile card sizing, toolbar presentation, drill-down overlays, and Action Item title containment without changing exported contracts or interaction logic.

Changes

Fairway UI refinements

Layer / File(s)	Summary
Drill-down Sheet overlay src/components/fairway/pages/coachhelm/FairwayAspectDrillDown.tsx	Replaces the modal wrapper with Sheet, preserving the panel content, title, description, and Done-button close behavior.
Responsive card sizing and typography src/components/fairway/cards-insight/InsightCard.tsx	Reduces hero-card mobile padding and typography, with larger values applied at the sm breakpoint.
Toolbar tint and search layout src/components/fairway/controls/Toolbar.tsx	Uses the stronger stuck-toolbar glass token and makes the search area full-width on small screens while retaining larger breakpoint constraints.
Action-item row containment src/components/fairway/pages/dashboard/FairwayCoachDashboard.tsx	Adds minimum-width and overflow constraints so long Action Item titles truncate within their rows.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• njrini99-code/helmv3#203: Also modifies the InsightCard hero variant.

Suggested labels: design-system

🚥 Pre-merge checks | ✅ 10 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title matches the PR, but the scope fairway is not in the required scope list.	Use a required scope such as coachhelm or ios and keep the Conventional Commits format.
Conventional Commits	❓ Inconclusive	HEAD subject matches the conventional-commit regex, but the PR title isn’t exposed in local metadata, so both required fields can’t be verified.	Provide the actual PR title (or a link/screenshot of the PR header) so I can confirm it also matches the regex.

✅ Passed checks (10 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
No Service-Role In Client Bundles	✅ Passed	No changed Fairway files reference SUPABASE_SERVICE_ROLE_KEY or create a service-role Supabase client; the search was empty across all four modified files.
Rls Coverage On New Tables	✅ Passed	No migration files changed; the PR diff only touches four TSX components, so the RLS rule is not implicated.
Auth Check In Server Actions	✅ Passed	No changed files under src/app//actions//.ts; the PR only touches four src/components/fairway/.tsx files, so the auth check is not triggered.
Sport-Prefixed Table Names	✅ Passed	PASS: changed TSX files have no Supabase client imports or .from() calls; only UI/layout code and action/type imports (InsightCard 31-59, Toolbar 41-56, DrillDown 29-73, Dashboard 39-99).
No Destructive Writes	✅ Passed	PASS: Changed files are UI/layout-only; the only save-related code is UI in FairwayAspectDrillDown.tsx:640-709, with no DELETE/INSERT rebuild path anywhere.
No Edits To Historical Migrations	✅ Passed	Diff touches only four src/components/fairway files; no supabase/migrations/* paths appear, so no historical migration edits were made.
Description check	✅ Passed	The description is clearly related to the mobile composition fixes in this PR.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/mobile-composition-0718

• 🛠️ helm safety pass
• 🛠️ dashboard ux pass
• 🛠️ rls test pass

---

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.}

[njrini99-code]

Pre-merge once-over (adversarial, multi-agent)

Ran a 6-lane verification fleet over the branch — every ModalShell/Sheet consumer (46 surfaces), every Toolbar consumer (17), the Signals surface + sub-views (13), the drill-down (13 checks), the dashboard + every variant="hero" usage (20), and a literal all-tabs/sub-tabs sweep from the surface registry (42 surfaces). Every non-advisory finding was independently attacked by 2 refuters; none were refuted — 4 confirmed, all fixed in f42f8ac:

1. Toolbar keyboard/tab order — the order-utility phone reflow made focus jump visually backwards below sm (DOM ≠ visual order). Recomposed as stacked full-width lines in source order (search / filter strip / toggle+actions); no order utilities anywhere in the row, view toggle mounted exactly once. Locked in by test.
2. Second evidence grid missed — the open-signal InsightPanel had its own copy of the 2-column evidence markup (this is the exact grid in the owner's screenshot). Extracted one shared EvidenceList; both the feed card and the detail panel now use it.
3. Drill-down on desktop — side="bottom" alone stretched the sheet edge-to-edge at wide widths. Now side="right" mobileSide="bottom": docked right column at md+, native bottom sheet on phone.
4. Player dashboard parity — same overflow-x-clip backstop as the coach root.

Independently spot-checked by hand: Segmented uses per-instance useId (no id collisions), zero ModalShell.Body/Sheet.Body className overrides depend on a stretched body, zero negative-margin/sticky descendants under either dashboard clip.

Gates after fixes: tsc clean · eslint clean · vitest fairway suite 160 files / 1,468 tests green. PR CI: all green (CodeRabbit red = prepaid credits exhausted, pre-existing).

🤖 Generated with Claude Code