Sizing: fluid mode-home hero + shared content-page container

[BigSimmo]

Summary

Two sizing slices (Home-first, then app-wide container). UI-only — no logic, data-flow, routing, ingestion, answer-generation, or clinical-output changes.

Slice 1 — mode-home hero (hybrid-fluid)

• New fluid --text-hero clamp() token: the hero heading scales smoothly ~23px→34px across viewports with no breakpoint jumps (floor pinned to 1.45rem so the 390px hero-metrics baseline is unchanged).
• Collapsed ModeHomeHero's dual sizing mechanism — removed the dead compact fork (all three consumers passed it) for clean mobile-first stepped icon/gaps.
• Off-scale one-off text sizes → named scale tokens, clearing the last arbitrary text-[…] so check:type-scale --strict is clean repo-wide.
• Loading skeleton aligned to the refactored hero (no load-time layout shift).

Slice 2 — content-page container unification

• New pageContainer recipe (mx-auto w-full max-w-7xl) as the single source of truth for content-page width; adopted byte-identically across the max-w-7xl cluster (service / form / differential detail, medication record + prescribing workspace, forms results).
• Fixed form-detail's h1 outlier: text-xl → text-3xl on mobile (was 20px vs the 30px every sibling detail page uses).

Deliberately deferred

Intentionally-wider surfaces (document viewer 1440px, differentials tables) and the hot ClinicalDashboard / DocumentViewer / header files keep their current widths. The header-height magic-number token (values are genuinely inconsistent — 4/4.75/3.5rem) and the services-navigator tap-target density work are left for a dedicated, coordinated pass.

Verification

• typecheck, lint, check:type-scale --strict, 1648 unit tests, prettier — all green.
• Chromium mode-home hero tests (metrics 44 / 23.2 / 14 + no horizontal overflow) green; no test baselines needed changing.
• Visual capture at 320 / 390 / 768 / 1024 / 1280 (home + services) and /forms/[slug] at 390 / 1280.

Clinical governance preflight

N/A — UI sizing only; no ingestion, retrieval/ranking, answer generation, source rendering, document access, privacy, or production-config changes.

🤖 Generated with Claude Code

[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

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

Next review available in: 20 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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: fd3852fb-cfd9-4bb1-bb05-2513c4115b94

📥 Commits

Reviewing files that changed from the base of the PR and between cc710b8 and 05b5977.

📒 Files selected for processing (1)

• src/app/globals.css

📝 Walkthrough

Walkthrough

The PR centralizes page container styling, adds fluid hero typography, standardizes the Mode Home hero API and presentation, updates related call sites, and adjusts Mode Home loading skeleton dimensions.

Changes

Layout and Mode Home updates

Layer / File(s)	Summary
Shared layout and typography contracts src/components/ui-primitives.tsx, src/app/globals.css	Adds the exported pageContainer utility and the fluid text-hero theme token.
Page container adoption src/components/clinical-dashboard/*, src/components/differentials/*, src/components/forms/*, src/components/services/*	Replaces repeated max-w-7xl wrapper classes with pageContainer while preserving page-specific spacing; the form title typography is also updated.
Mode Home hero and loading presentation src/components/mode-home-template.tsx, src/components/applications-launcher-page.tsx, src/components/clinical-dashboard/favourites-hub.tsx, src/components/mode-home-page-skeleton.tsx	Removes the compact hero prop, updates hero and action typography, sets an explicit heading level for the launcher hero, removes compact from favourites, and changes skeleton dimensions.

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

Possibly related PRs

• BigSimmo/Database#421: Both PRs modify Mode Home hero/template layout and styling.

---

Caution

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

• Ignore

❌ Failed checks (1 error, 1 warning)

Check name	Status	Explanation	Resolution
Verification Claims	❌ Error	The PR description claims typecheck/lint/tests/browser/visual checks were “all green,” but gives no exact run command/check + result wording.	Rewrite verification notes as explicit entries, e.g. “Ran npm run verify:cheap: passed” or “Not run: reason,” for each claimed check.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 70.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (9 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly captures the two main UI sizing changes: the fluid mode-home hero and the shared content-page container.
Description check	✅ Passed	The description matches the template well, with Summary, Verification, Clinical Governance Preflight, and Notes content mostly filled in.
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.
Generated And Sensitive Files	✅ Passed	PASS: Diff only touches 11 .tsx and 1 .css source files; no .env, build artifacts, caches, node_modules, or secret-like content detected.
Risky Git Or Deployment Actions	✅ Passed	Search found only prohibitions/warnings (AGENTS, branch-cleanup guide, playbook), not instructions to force-push/reset/deploy without confirmation; PR is UI-only.
Supabase Project And Schema Safety	✅ Passed	Patch only changes UI TSX/CSS files; no Supabase refs, env/docs, migrations, RLS, or schema/data changes appear in the diff.
Runtime And Package Manager Integrity	✅ Passed	PR only touches UI/CSS files; package.json still pins npm@11.17.0/Node 24.x and .npmrc keeps engine-strict=true.
Api Route Failure Handling	✅ Passed	Diff is UI-only layout/typography; no API routes, server actions, RAG/search/ingestion/provider code changed.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/home-page-sizing-plan-02011e

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/home-page-sizing-plan-02011e

---

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