Fix iOS Safari content below hidden search composer

[BigSimmo]

Summary

• remove Safari's browser-toolbar safe-area reserve after the phone search composer is actually hidden
• keep the full safe-area clearance while interactive composer chrome remains visible
• switch dashboard result/answer clearance from outer margin to scrollable content padding so the scrollport stays edge-to-edge
• apply the same hidden/visible reserve behavior to the shared standalone shell and document viewer
• add regression coverage for the 112px simulated Safari toolbar inset in answer, results, and document-viewer flows

Verification

• Push format guard / Prettier
• git diff --check origin/main...HEAD
• Focused static regression: 7/7 passed on the same implementation before isolation
• Targeted phone scenarios passed in Chromium and WebKit before isolation: shared shell, answer dock, and document viewer
• npm run verify:pr-local in the isolated worktree — not completed because the repository-wide heavy-command lock remained held by another active worktree's Playwright suite; required PR checks are running on this branch
• UI verification not run: the full npm run verify:ui suite was blocked by the repository-wide heavy-command lock; the affected Chromium and WebKit scenarios passed in targeted runs before isolation.

Risk and rollout

• Risk: Low; scoped to phone bottom-reserve geometry when fixed composer chrome hides or reappears. Clinical data, retrieval, answer content, document access, and API behavior are unchanged.
• Rollback: Revert commit 7970ae800 to restore the prior fixed reserve behavior.
• Provider or production effects: Git branch/PR publishing only; no application APIs, Supabase, OpenAI, deployment, or production data interactions.

Clinical Governance Preflight

• 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

• The previous edge-to-edge PR (Fix mobile edge-to-edge content when chrome hides #899) is merged, but main still retained max(0.75rem, env(safe-area-inset-bottom)) for the hidden state. On iOS Safari that inset includes the translucent bottom browser toolbar, recreating the toolbar-sized blank band shown in the report.

Summary by CodeRabbit

• Bug Fixes

  • Improved mobile scrolling and spacing around the bottom composer, including the document viewer.
  • Removed excess blank space by reserving bottom area only while the dock is visible, and collapsing padding when it hides.
  • Updated mobile/Safari safe-area handling to use the correct CSS variable, with a tighter reserve when the dock is hidden.
  • Refined transitions so composer/dock visibility updates reliably when scrolling or focusing the composer.

• Tests

  • Strengthened mobile and WebKit/Safari smoke tests with safe-area-aware padding assertions and retriable hide/show flows.

[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: 2c393ab4-3ecd-465c-8feb-e835796bbe62

📥 Commits

Reviewing files that changed from the base of the PR and between a7aba4b and 11d4360.

📒 Files selected for processing (1)

• tests/clinical-dashboard-merge-artifacts.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• tests/clinical-dashboard-merge-artifacts.test.ts

---

📝 Walkthrough

Walkthrough

Mobile composer visibility now drives safe-area-aware bottom reserves for dashboard, search, and document content. Tests simulate Safari safe-area behavior and verify padding and geometry while composers hide and reappear.

Changes

Mobile composer reserve synchronization

Layer / File(s)	Summary
Composer state and dashboard layout src/components/ClinicalDashboard.tsx	Tracks composer visibility, computes the mobile reserve, exposes --mobile-composer-reserve, and applies it to mobile main padding.
Safe-area and viewer reserve behavior src/components/clinical-dashboard/global-search-shell.tsx, src/components/DocumentViewer.tsx, src/components/clinical-dashboard/master-search-header.tsx	Uses --safe-area-bottom for visible reserves, collapses hidden reserves, and adjusts document viewer padding based on composer visibility.
Mobile reserve validation tests/clinical-dashboard-merge-artifacts.test.ts, tests/ui-smoke.spec.ts, tests/ui-tools.spec.ts	Adds source guards and safe-area-aware assertions for answer, document viewer, and search dock hide/show transitions.

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

Possibly related PRs

• BigSimmo/Database#421: Updates shared mobile composer reserve and #main-content padding behavior.
• BigSimmo/Database#704: Modifies composer hide-on-scroll wiring and resulting layout clearance.
• BigSimmo/Database#900: Changes mobile composer reserve calculations in the global search shell.

Suggested labels: codex

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing iOS Safari spacing when the search composer is hidden.
Description check	✅ Passed	The description follows the template with Summary, Verification, Risk and rollout, Clinical Governance Preflight, and Notes, including stated gaps where checks were not run.
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 codex/mobile-safari-hidden-composer-edge

---

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

[coderabbitai]

🧹 Nitpick comments (1)

tests/clinical-dashboard-merge-artifacts.test.ts (1)

32-32: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider guarding that --safe-area-bottom is actually defined in globals.css.

This suite already loads globalStylesSource (line 33, unchanged) but only asserts that consumers reference var(--safe-area-bottom), never that it's defined. Given the whole PR hinges on that variable resolving to a real value in production (see the request-verification note on ClinicalDashboard.tsx lines 3253-3266), a cheap guard here (e.g. expect(globalStylesSource).toContain("--safe-area-bottom")) would catch a future accidental removal of the definition.

✅ Proposed guard addition

     expect(documentViewerSource).toContain('"max-sm:pb-[calc(9rem+var(--safe-area-bottom))]"');
+    expect(globalStylesSource).toContain("--safe-area-bottom");

Also applies to: 90-101

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/clinical-dashboard-merge-artifacts.test.ts` at line 32, Update the
assertions in the clinical dashboard merge-artifacts test to verify that
globalStylesSource defines --safe-area-bottom, not only that consumers reference
it. Add the guard alongside the existing DocumentViewer.tsx and
ClinicalDashboard.tsx variable-reference checks, preserving the current test
structure.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/clinical-dashboard-merge-artifacts.test.ts`:
- Line 32: Update the assertions in the clinical dashboard merge-artifacts test
to verify that globalStylesSource defines --safe-area-bottom, not only that
consumers reference it. Add the guard alongside the existing DocumentViewer.tsx
and ClinicalDashboard.tsx variable-reference checks, preserving the current test
structure.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 87ed1b50-3e78-4654-bb4b-a8d6c364d631

📥 Commits

Reviewing files that changed from the base of the PR and between e57533c and 7970ae8.

📒 Files selected for processing (7)

• src/components/ClinicalDashboard.tsx
• src/components/DocumentViewer.tsx
• src/components/clinical-dashboard/global-search-shell.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• tests/clinical-dashboard-merge-artifacts.test.ts
• tests/ui-smoke.spec.ts
• tests/ui-tools.spec.ts

[github-actions]

CI triage

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

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

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

[BigSimmo]

@cursoragent fix comment and resolve without regression. Also fix failing CI to ensure this can merge

[cursor]

Fixed the review comment and the CI failure on PR #922.

Review comment (CodeRabbit)

Added the suggested guard in tests/clinical-dashboard-merge-artifacts.test.ts so the suite verifies --safe-area-bottom is defined in globals.css, not only referenced by consumers.

CI failure (Production UI / PR required)

The failing test was demo answer flow reaches a source-backed answer @critical. After long sheet interactions, the phone answer dock could stay translated off-screen (data-scroll-hidden="true"), so openScopeControl timed out trying to click a composer that was “visible” but outside the viewport.

Fix: openScopeControl now scrolls the primary surface to the top and waits for the bottom dock to be revealed before clicking.

Verification (local)

• clinical-dashboard-merge-artifacts.test.ts — 7/7 passed
• Playwright: demo answer flow @critical, answer glass header hide, document viewer composer hide, phone bottom search dock hide — all passed

Pushed as a7aba4be on codex/mobile-safari-hidden-composer-edge. CI should rerun on the new commit; once Production UI and PR required go green, this should be merge-ready.

  

[cursor]

Addressed the CodeRabbit nitpick and the Production UI failure:

1. Review comment — Added expect(globalStylesSource).toContain("--safe-area-bottom") to the Safari reserve merge-artifact guard so the token definition is covered, not just consumer references.

2. CI (demo answer flow reaches a source-backed answer @critical) — openScopeControl now scrolls the phone answer dock back into view and waits for data-scroll-hidden to clear before clicking. Prior sheet interactions in that long smoke test could leave the fixed composer translated off-screen (element is outside of the viewport), which caused the 60s click timeout.

Local verification

• npx vitest run tests/clinical-dashboard-merge-artifacts.test.ts — 7/7
• Playwright: demo answer flow @critical, answer glass header hide, document viewer composer hide, phone bottom search dock hide — all passed

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/clinical-dashboard-merge-artifacts.test.ts`:
- Line 102: Strengthen the assertion for globalStylesSource in the relevant test
so it verifies the --safe-area-bottom custom-property declaration rather than
merely token usage. Match the property name followed by optional whitespace and
a colon, or assert its expected env(safe-area-inset-bottom) value.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ad5e10e3-2fbc-401c-b31d-4c4f49d84954

📥 Commits

Reviewing files that changed from the base of the PR and between 7970ae8 and a7aba4b.

📒 Files selected for processing (2)

• tests/clinical-dashboard-merge-artifacts.test.ts
• tests/ui-smoke.spec.ts

[cursor]

Resolved the CodeRabbit follow-up on tests/clinical-dashboard-merge-artifacts.test.ts:

• Replaced toContain("--safe-area-bottom") with toMatch(/--safe-area-bottom\s*:/) so the guard asserts the custom-property declaration in globals.css, not merely token usage elsewhere.

Local check: npx vitest run tests/clinical-dashboard-merge-artifacts.test.ts — 7/7 passed.