Keep mobile sheet headers below device safe areas

[BigSimmo]

Summary

• Add a shared mobile top-safe-area contract for Sheet headers, including padding and absolute-header offset modes.
• Protect fullscreen sheets automatically and opt near-full account, mode, sidebar, and calculator surfaces into the appropriate behavior without changing short sheets or desktop spacing.
• Add DOM, static ownership, and production-browser geometry coverage, and synchronize the Design Sync and design-system adoption metadata for the new public Sheet prop.

Verification

• npm run verify:pr-local — partial. Runtime, installed-lock parity, changed-file formatting, lint, and typecheck passed. The full unit stage recorded 6,608 passed, 11 failed, and 27 skipped. Three branch-owned generated-contract failures were fixed afterward. The remaining failures were outside the changed scope but were not baseline-confirmed: PDF virtualization idle scheduling, Windows Playwright executable semantics, a private-access timeout, and Windows session-start hook path/cleanup behavior. Build and later offline domain stages were not reached.
• npm run verify:ui — 437/437 production Chromium tests passed, including production compilation, TypeScript, accessibility modes, responsive routes, PWA checks, and shared UI coverage.
• npm run check:design-system-contract — passed after regenerating adoption and Design Sync metadata.
• npm test -- tests/sheet.dom.test.tsx tests/mobile-sheet-safe-area-contract.test.ts --maxWorkers=1 — 14/14 passed.
• npm test -- tests/sheet.dom.test.tsx tests/favourites-auth-gate.dom.test.tsx --maxWorkers=1 — 27/27 passed.
• npm run test:e2e -- tests/ui-smoke.spec.ts --project=chromium --grep "account settings stays readable|phone mode menu groups the catalogue" — 2/2 passed at 320, 390, 430, and 639px with a simulated 59px top safe area.
• git diff --check — passed.
• npm run verify:release — not run; release confidence was not requested.

Risk and rollout

• Risk: Safe-area geometry varies by browser and installed-app mode. CSS uses the existing env-backed safe-area token and keeps tablet/desktop spacing unchanged.
• Rollback: Revert the single PR commit to restore the prior Sheet header behavior.
• Provider or production effects: None.

Notes

• Physical iPhone Safari and cold-launched installed-PWA compositor acceptance were not run; Chromium responsive and PWA checks do not certify that hardware-specific boundary.
• Remote main advanced by five commits after this task worktree was created. None of those commits changed a file in this PR, and the branch was not rebased or merged.
• The pre-push guard skipped its duplicate lint/typecheck pass because another worktree held the heavyweight coordinator lease; the branch-local PR gate had already passed both stages, and hosted CI remains authoritative.

Summary by CodeRabbit

• New Features

  • Added mobile safe-area handling for sheet headers, supporting padded and offset layouts.
  • Updated account setup, mode menus, and “More modes” sheets to keep content clear of phone notches and status bars.
  • Improved calculator sheet height handling on mobile devices.

• Bug Fixes

  • Prevented mobile sheet headers and controls from overlapping top safe-area insets.

• Tests

  • Added coverage for safe-area behavior across sheets, calculators, account setup, and mobile menus.

[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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 87bbe49c-e4cf-4e70-9626-0082867832f1

📥 Commits

Reviewing files that changed from the base of the PR and between 8069188 and af0d41c.

📒 Files selected for processing (10)

• .design-sync/config.json
• docs/design-system/adoption-manifest.json
• src/components/calculators/calculator-sheet.tsx
• src/components/clinical-dashboard/ClinicalSidebar.tsx
• src/components/clinical-dashboard/account-setup-dialog.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• src/components/ui/sheet.tsx
• tests/mobile-sheet-safe-area-contract.test.ts
• tests/sheet.dom.test.tsx
• tests/ui-smoke.spec.ts

---

📝 Walkthrough

Walkthrough

The Sheet component now supports mobile safe-area padding and offsets. Dashboard sheets and calculator sizing use the new behavior. Contract, DOM, and UI smoke tests validate safe-area positioning across mobile layouts.

Changes

Mobile sheet safe-area handling

Layer / File(s)	Summary
Sheet safe-area API and rendering src/components/ui/sheet.tsx, .design-sync/config.json	Adds the SheetMobileHeaderSafeArea type and mobileHeaderSafeArea prop. The Sheet resolves defaults, exposes the mode through a data attribute, and applies padding or offset classes.
Dashboard and calculator integration src/components/calculators/calculator-sheet.tsx, src/components/clinical-dashboard/*	Dashboard sheets opt into safe-area padding or offset behavior. Account setup and calculator layouts use safe-area-aware spacing and height constraints.
Contract and UI validation tests/mobile-sheet-safe-area-contract.test.ts, tests/sheet.dom.test.tsx, tests/ui-smoke.spec.ts, docs/design-system/adoption-manifest.json	Adds source contracts, DOM tests, and phone viewport checks for safe-area positioning. Registers the new contract test.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to af0d4

The PR adds mobile safe-area handling for Sheet headers while preserving existing short-sheet and desktop behavior. No actionable merge-blocking risk remains after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant PhoneViewport
  participant Sheet
  participant SheetHeader
  PhoneViewport->>Sheet: provide top safe-area inset
  Sheet->>Sheet: resolve mobileHeaderSafeArea
  Sheet->>SheetHeader: apply padding or offset
  SheetHeader-->>PhoneViewport: render positioned controls

Loading

Possibly related PRs

• BigSimmo/Database#595: Both changes modify the Sheet component and design-sync configuration.
• BigSimmo/Database#1763: Both changes modify the ClinicalSidebar More modes Sheet behavior.
• BigSimmo/Database#1955: Both changes modify the account setup dialog and its UI smoke tests.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: keeping mobile Sheet headers below device safe areas.
Description check	✅ Passed	The description covers the change, verification results, risks, rollback, production effects, limitations, and relevant metadata updates.
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.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/mobile-safe-area-system-20260815

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

_{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):

• Production UI (2) — 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 #11131 (success).

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