feat(ui): standardize responsive breakpoint tokens and align header/secondary controls (#336, #222, #321)

[BigSimmo]

Summary

This PR addresses Workstream 8: Responsive Tokens & Header Alignment (#336, #222, #321).

1. Task #336 (Standardize Named Responsive Breakpoint Tokens):

   • Created src/styles/tokens.css defining standard breakpoint variables (--bp-phone: 640px;, --bp-tablet: 768px;, --bp-desktop: 1024px;).
   • Added standard named --breakpoint-phone, --breakpoint-tablet, --breakpoint-desktop variants in @theme in src/app/globals.css.
   • Declared --bp-* tokens in :root (globals.css) and .ckb-v2.ckb-v2 (ckb-v2-tokens.css).
   • Added contract assertions in tests/design-token-contract.test.ts.

2. Task #222 (Headers Surface Styling Convergence):

   • In src/components/mode-home-template.tsx, aligned ModeHomeHero heading typography weight from font-extrabold to font-semibold (matching --font-weight-heading per design system SPEC §4.6).
   • In src/components/clinical-dashboard/search-results-header-band.tsx, aligned emptyStateAction and SearchResultsEmptyState <Title> typography weights from font-extrabold to font-semibold.

3. Task #321 (Secondary Controls Focus & Padding Alignment):

   • In src/components/forms/form-detail-page.tsx, replaced non-standard focus rings on detail cards with standard focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)], added focus rings and minimum tap height (min-h-tap sm:min-h-9) to Decision Context tab buttons, and aligned source action links to min-h-tap sm:min-h-10.
   • In src/components/clinical-dashboard/search-results-header-band.tsx, aligned empty state filter removal button to min-h-tap sm:min-h-9, font-semibold, padding px-3, and standard focus ring outline.

Verification

• tests/design-token-contract.test.ts: 37 / 37 passed
• tests/ckb-v2-token-contract.test.ts: 26 / 26 passed
• tests/tailwind-merge-config.test.ts: 33 / 33 passed
• tests/search-results-header-band.dom.test.tsx: 60 / 60 passed
• tests/ui-style-contract.spec.ts (Chromium): 10 / 10 passed
• tests/ui-accessibility.spec.ts (Chromium): 16 / 16 passed
• npm run typecheck:internal: Passed (0 errors)
• npm run lint:internal: Passed (0 errors)
• npm run format: Clean

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy 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 ↗︎.

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 12 minutes

Limit details: You’ve used all 1 included review currently available under your plan. You completed 97 included PR reviews in the past 7 days; at that activity level, included reviews refill at 1 review per hour.

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

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: CHILL

Plan: Pro

Run ID: 86166a54-54ff-4181-b63e-a71ab3e334f5

📥 Commits

Reviewing files that changed from the base of the PR and between 7662720 and a267ef3.

📒 Files selected for processing (7)

• src/app/ckb-v2-tokens.css
• src/app/globals.css
• src/components/clinical-dashboard/search-results-header-band.tsx
• src/components/forms/form-detail-page.tsx
• src/components/mode-home-template.tsx
• tests/audit-content-services-regressions.test.ts
• tests/design-token-contract.test.ts

---

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

[github-actions]

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

• Unit coverage — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• PR required — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #11710 (cancelled).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

[Copilot]

Pull request overview

This PR implements Workstream 8 work to standardize responsive breakpoint tokens and align header/secondary control styling across the UI, with accompanying contract/test updates to lock in the new token expectations.

Changes:

• Introduces standard named breakpoint tokens (--bp-phone/tablet/desktop) and corresponding @theme breakpoint variables.
• Aligns heading/empty-state typography weights to the design system heading weight (font-semibold).
• Standardizes focus-ring treatment and minimum tap heights for secondary controls in the forms detail UI and search empty-state controls, updating regression/contract tests accordingly.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/design-token-contract.test.ts	Adds assertions for the new breakpoint token contract across globals, @theme, and ckb-v2 tokens.
tests/audit-content-services-regressions.test.ts	Updates regression expectations for the adjusted min-height/tap-target classes on form source links.
src/styles/tokens.css	Adds a shared stylesheet containing the standard breakpoint custom properties.
src/components/mode-home-template.tsx	Aligns ModeHome hero heading font weight with the design system.
src/components/forms/form-detail-page.tsx	Standardizes focus outline + tap target sizing for detail cards, tab buttons, and source action links.
src/components/clinical-dashboard/search-results-header-band.tsx	Aligns empty-state action/control typography and sizing with shared header/secondary-control conventions.
src/app/globals.css	Imports the new token sheet and declares breakpoint variables in both @theme and :root.
src/app/ckb-v2-tokens.css	Declares the same breakpoint variables within the v2 token scope for symmetry/contract coverage.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[BigSimmo]

@copilot Fix the code for all comments in this review thread.

When a review comment includes a suggested change, apply the suggestion exactly.

Do not make changes beyond what is described in the linked review thread.

[Copilot]

@copilot Fix the code for all comments in this review thread.

When a review comment includes a suggested change, apply t...

Removed src/styles/tokens.css and its @import from globals.css. The --bp-* values now live only in globals.css (:root) and ckb-v2-tokens.css, which are the files the contract tests already parse directly. All 37 design-token contract assertions continue to pass.