Fix black band under phone content when iOS Safari toolbar collapses

[BigSimmo]

Summary

• Fix the dead black band that appeared between the app content and the browser toolbar on iPhone: when iOS Safari's bottom toolbar collapsed/expanded, the phone shell — a position: fixed; inset: 0 box that also forced height: 100dvh — kept a stale dvh height (iOS resolves dvh lazily, especially with body scrolling disabled) and its overflow-hidden clipped everything below it.
• Size the phone shell from its fixed insets alone (max-sm:inset-0, no h-dvh; inner column max-sm:h-full). Fixed insets track Safari's live viewport through the whole toolbar transition, so content now fills the screen edge to edge and shows through under the minimized glass bar (viewport-fit=cover was already set).
• Apply the same dvh → full swap to the other phone-fullscreen surfaces that shared the hazard: the fullscreen Sheet variant, the left drawer, the settings dialog, and the fullscreen document-scope sheet. Each already sits inside a fixed inset-0 backdrop, so percentage sizing resolves against the live viewport. Desktop (sm:/lg:) sizing is unchanged.

Verification

• npm run typecheck — 0 errors
• npm run lint — clean
• npm run test — 2681 passed; the single failure (tests/pdf-extraction-budget.test.ts child-process kill) fails identically on a clean tree in this container (sandbox signal limitation), pre-existing
• npm run verify:ui — 216/217 passed. The one failure (ui-smoke.spec.ts › document viewer PDF canvas on mobile) reproduces identically on the base commit without this change in the same container (pdf.js canvas does not render under the container's substituted Chromium headless-shell build), so it is environment-caused and not a regression of this diff; the failure screenshot shows the surrounding shell/layout rendering correctly
• npm run verify:pr-local not run: lint, typecheck, unit suite, and the UI gate were run individually; no RAG fixture/manifest surface touched
• The stale-dvh behavior itself only reproduces on iOS Safari hardware during toolbar collapse, which local Chromium cannot simulate — please confirm on-device that content now fills the space when the bottom bar hides

Risk and rollout

• Risk: low — class-string-only change to phone layout sizing; each edited box's height source moves from the 100dvh unit to its already-present inset-0/definite-height parent, which computes the same value when dvh is fresh
• Rollback: revert commit c6870c4
• Provider or production effects: None

Clinical Governance Preflight

Presentation-layer sizing change only; every invariant below is untouched by the diff and still holds.

• Source-backed claims still require linked source verification before clinical use
• No patient-identifiable document workflow was introduced or expanded without explicit governance approval
• Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
• Service-role keys and private document access remain server-only
• Demo/synthetic content remains clearly separated from real clinical sources
• Source metadata, review status, and outdated/unknown-source behavior remain conservative
• Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed

Notes

• cn is a plain join (no tailwind-merge), so the fullscreen scope sheet's contentClassName was switched to max-h-full in the same commit to keep it identical to the new Sheet fullscreen base class and avoid an order-dependent max-h conflict.

🤖 Generated with Claude Code

https://claude.ai/code/session_01CkCda13HLjNhg7oDycmoSh

Summary by CodeRabbit

• Bug Fixes
  • Improved mobile global search and dialog layouts during browser toolbar transitions.
  • Eliminated dead space beneath fullscreen sheets on iOS Safari.
  • Improved height handling for fullscreen scope pickers and settings dialogs.
  • Enhanced small-screen content sizing and scrolling behavior.

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

Run ID: bd242074-9930-4d1e-a60e-d40c63c20c91

📥 Commits

Reviewing files that changed from the base of the PR and between a917168 and 5dd2307.

📒 Files selected for processing (4)

• src/components/clinical-dashboard/global-search-shell.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• src/components/clinical-dashboard/settings-dialog.tsx
• src/components/ui/sheet.tsx

---

📝 Walkthrough

Walkthrough

Mobile search shells, sheets, and dialogs replace dynamic viewport-height sizing with fixed inset tracking or full-container height constraints to handle mobile toolbar transitions.

Changes

Mobile viewport sizing

Layer / File(s)	Summary
Search shell viewport tracking src/components/clinical-dashboard/global-search-shell.tsx	The mobile shell uses fixed viewport insets and a full-height flex wrapper while preserving overflow containment.
Fullscreen sheet and dialog sizing src/components/ui/sheet.tsx, src/components/clinical-dashboard/master-search-header.tsx, src/components/clinical-dashboard/settings-dialog.tsx	Fullscreen sheet, document scope sheet, and settings dialog containers use h-full or max-h-full instead of dynamic viewport-height utilities.

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

Possibly related PRs

• BigSimmo/Database#421: Modifies mobile search and header layout behavior.
• BigSimmo/Database#560: Uses the shared fullscreen Sheet implementation for clinical tables.
• BigSimmo/Database#684: Updates related mobile layout and height logic.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	It clearly summarizes the main fix: removing the iOS Safari black band during toolbar collapse.
Description check	✅ Passed	The description follows the template and includes summary, verification, risk, governance, and notes.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/edge-to-edge-content-lv9x7k

---

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