fix(mobile): remove half-screen black void below short phone answers

[BigSimmo]

Summary

• On phones the answer view left a large near-black empty band below short answers (e.g. the source-only "I found matching indexed passages, but could not generate a finalized answer right now." fallback), down to the fixed "Ask a follow-up" dock. The "Review source match" card was not clipped — the region was just oversized/broken empty space (--background #060708).
• Root cause was reservations stacking in src/components/ClinicalDashboard.tsx:
  1. a min-h-[calc(100dvh-12.5rem)] floor (borrowed from the centred answer-home) forced the answer <section> to ~full viewport height even for short content — a scrollable dead-space with a false scroll affordance you could scroll down into;
  2. the <main> follow-up reserve mb-[calc(18rem+…)] far exceeded the real composer dock (measured ~6rem / 98px), painting a black band above the dock;
  3. pb-32 wrapper padding floated a long answer's last line high above the dock.
• Fix (all phone-only; sm:/desktop untouched), scoped to activeModeResultKind === "answer" && answer:
  • Drop the viewport-height floor for a rendered answer so the section is content-sized and the answer stays top-aligned under the question with calm space below — no phantom scroll into black. Long answers are content-sized too and scroll from the top as before.
  • Right-size the follow-up composer reserve 18rem → 7.5rem so it hugs the measured dock height, removing the black band above the dock.
  • Trim the phone answer wrapper padding pb-32 → pb-4 so a long answer's last line sits close to the composer rather than floating above a large trailing gap.
• The answer-home centring (max-sm:min-h-[calc(100dvh-12.5rem)] branch), the answer pending/skeleton state, and every other result kind (tools/documents/services/differentials/favourites) are unchanged.

Verification

• npm run verify:cheap — passes (runtime, Actions pin, sitemap, brand, type-scale, icon-scale, full lint, typecheck, 1750 vitest tests including tests/clinical-dashboard-merge-artifacts.test.ts). Re-ran typecheck + lint + full test after the top-aligned adjustment.
• Manual Chromium browser QA (in lieu of the automated verify:ui gate) via Playwright at an iPhone-class phone viewport and desktop, dark theme, with before/after + DOM geometry measurement:
  • Short/sparse answer: content is top-aligned under the question; scrollHeight === clientHeight (no phantom scroll into black); no band above the composer.
  • Medium/long answer: content-sized, scrolls from the top; last card clears the fixed dock; scroll-hide reclaim intact.
  • Answer-home (empty): search hero still vertically centred.
  • Desktop (sm+): visually identical to before.
• Retrieval/answer-eval and readiness checks: N/A — no retrieval, ranking, selection, chunking, answer-generation, source-governance, privacy, env, or deployment behaviour changed.

Clinical Governance Preflight

N/A — this is a pure phone-layout change (container min-height/margin/padding). It does not touch ingestion, answer generation, search/ranking, source rendering logic, document access, privacy, production env, or clinical output. No source-backed claim behaviour, Supabase target, key handling, or demo/synthetic separation is affected.

Notes

• The visible black band below short phone answers is removed by killing the broken parts — the scrollable dead-space (viewport-height floor) and the oversized dock reserve. A short answer keeps its natural, calm empty space below it (top-aligned, like ChatGPT/Claude mobile); long answers and all non-phone widths are unchanged.

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved mobile answer-view spacing when the follow-up prompt is hidden during scrolling.
  • Prevented answers from stretching unnecessarily on phones, reducing blank space and phantom scrolling.
  • Preserved existing layout behavior for other viewing modes and screen sizes.

Walkthrough

ClinicalDashboard updates mobile answer-mode spacing to account for the fixed follow-up dock and prevent answer sections from inheriting the general viewport-height floor on phones.

Changes

Mobile answer layout

Layer / File(s)	Summary
Answer-mode spacing and sizing src/components/ClinicalDashboard.tsx	Adjusts mobile dock reserves, reduces centered answer-view padding, and makes rendered answer sections content-sized on phones while preserving larger-breakpoint behavior.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• BigSimmo/Database#431: Also modifies ClinicalDashboard mobile answer-mode spacing for the fixed bottom dock.

🚥 Pre-merge checks | ✅ 11

✅ Passed checks (11 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and clearly summarizes the mobile spacing fix for short phone answers.
Description check	✅ Passed	The description is well structured and covers summary, verification, and governance notes, with only the automated UI gate replaced by manual QA.
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.
Generated And Sensitive Files	✅ Passed	Only src/components/ClinicalDashboard.tsx changed; no secrets, env files, logs, caches, build outputs, or generated artifacts were committed.
Verification Claims	✅ Passed	Verification is explicit: npm run verify:cheap is named as passed, manual Playwright QA is described with outcomes, and other checks are marked N/A.
Risky Git Or Deployment Actions	✅ Passed	No added force-push/reset/destructive/deploy guidance found; scans only hit existing repo safety docs that prohibit those actions, and the changed TSX file has none.
Supabase Project And Schema Safety	✅ Passed	Only src/components/ClinicalDashboard.tsx changed; diff is phone layout spacing with no Supabase project refs, migrations, RLS, policy, or schema/data changes.
Runtime And Package Manager Integrity	✅ Passed	PASS: Diff only touches src/components/ClinicalDashboard.tsx; package.json, package-lock.json, .npmrc, .node-version, and .nvmrc still pin npm@11.17.0/Node 24.x with engine-strict=true.
Api Route Failure Handling	✅ Passed	PR only changes phone-layout spacing in ClinicalDashboard.tsx; no API route, server action, RAG, search, ingestion, or provider code was modified.

✨ 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/phone-blackout-fix-nuxnt3

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/phone-blackout-fix-nuxnt3

---

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

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

🧹 Nitpick comments (1)

src/components/ClinicalDashboard.tsx (1)

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

Add a regression test for short-answer phone layout.

The conditional spacing looks consistent with the intended fix, but this behavior should be locked down with a Chromium test covering: short answers without phantom scroll, long answers remaining scrollable, and the final content staying clear of .answer-footer-search-dock. The existing dock-geometry helpers in tests/ui-smoke.spec.ts are a suitable place to extend coverage.

As per coding guidelines, run npm run ensure before UI testing and use npm run verify:ui as the Chromium gate.

Also applies to: 3590-3595, 3623-3632

🤖 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 `@src/components/ClinicalDashboard.tsx` around lines 3550 - 3558, Add Chromium
regression coverage in the existing dock-geometry helpers in
tests/ui-smoke.spec.ts for short-answer phone layouts: verify short answers have
no phantom scroll, long answers remain scrollable, and the final content clears
.answer-footer-search-dock. Run npm run ensure before UI testing and use npm run
verify:ui as the validation gate.

Source: Coding guidelines

🤖 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 `@src/components/ClinicalDashboard.tsx`:
- Around line 3550-3558: Add Chromium regression coverage in the existing
dock-geometry helpers in tests/ui-smoke.spec.ts for short-answer phone layouts:
verify short answers have no phantom scroll, long answers remain scrollable, and
the final content clears .answer-footer-search-dock. Run npm run ensure before
UI testing and use npm run verify:ui as the validation gate.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8199635b-67da-4341-a1ac-2d04d17a9f01

📥 Commits

Reviewing files that changed from the base of the PR and between 75d7ac4 and 8ea8cf9.

📒 Files selected for processing (1)

• src/components/ClinicalDashboard.tsx