fix(responsive): resolve site-wide layout defects across all breakpoints

[BigSimmo]

Summary

Site-wide responsive review — drove every production route at 11 widths (320–1536px + landscape) in Chromium with page-overflow and internal-clip probes plus visual triage. Fixes 7 layout defects. Desktop and phone layouts are unchanged; the only behavioral change is the tablet band for the Answer composer.

• Answer follow-up composer off-screen across 640–1023px (the big one). In the submitted-answer view the composer was dragged ~186px off the left edge. Root cause: it was hard-coded sm:sticky (top-docked) in the 640–1023 band, but the centering CSS (left:50%/calc + translateX(-50%)) is written for a fixed element, so the transform pushed the sticky element off-screen. Made the Answer composer fixed bottom-0 at all widths — bottom-docked and consistent with phone/desktop. The existing rail-aware centering rules already handle a fixed composer, so an earlier CSS workaround was reverted (globals.css ends up untouched).
• DocumentViewer "Answer from this" button clipped at 320px → gate whitespace-nowrap to sm: so it wraps on narrow phones.
• Service detail long status chip collapsed into a circle when its text wrapped → rounded-full → rounded-2xl (still a pill at single-line height).
• Tools/Applications list-row CTAs clipped at ≤390px → nested single-column display:grid implicit auto columns weren't shrinking → grid-cols-1 (minmax(0,1fr)).
• documents-source monitoring table cards + evidence header overflowed at 320px → responsive column/title sizing (sm: restores the desktop sizing).
• Differentials candidate-card title clipped a long word at 320px → break-words.

6 files, +14/−12.

Verification

• npm run verify:ui — exit 0 (full Chromium suite)
• Also ran npm run verify:cheap (green: lint, typecheck, format, type-scale, sitemap, unit) and targeted ui-tools + ui-overlap → 57 passed
• Composer geometry verified bottom-docked and centered (rail-aware) at 390 / 640 / 768 / 900 / 1024 / 1280
• Zero horizontal page overflow at any width across all routes (before and after)

Not applicable (no such logic changed): eval:retrieval:quality, eval:rag, check:production-readiness, check:deployment-readiness.

Clinical Governance Preflight

Layout/responsive-only change. It touches source-rendering surfaces (document viewer, documents table) but only their visual sizing — no source content, retrieval, access, governance, or clinical-output behavior changed. All invariants hold:

• Source-backed claims still require linked source verification before clinical use
• No patient-identifiable document workflow was introduced or expanded
• 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 unaffected (no clinical decision-support behavior changed)

Notes

• The Answer composer's dock was inconsistent (bottom on phone/desktop, top on tablet); this makes it bottom-docked everywhere per product decision. The services/forms/favourites/differentials result composers intentionally stay top-docked from tablet up (guarded by the "keep top search from tablet up" test) and are unchanged.
• Two benign non-defects were left as-is: a search <input> scrolling its own text, and a ~6px sub-pixel/scrollbar residual on the PDF reader at desktop (maps to no visible over-wide element).

🤖 Generated with Claude Code

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated responsive layout classes, text wrapping, evidence header presentation, pill customization, monitoring card columns, and service status chip styling across several interface components.

Changes

Responsive UI styling

Layer / File(s)	Summary
Workspace layout positioning src/components/applications-launcher-page.tsx, src/components/clinical-dashboard/master-search-header.tsx	Launcher result areas now explicitly use single-column grids, and the desktop-home search composer uses fixed-bottom positioning classes.
Content wrapping and evidence headers src/components/differentials/differential-presentation-workflow-page.tsx, src/components/master-document-flow-mockups.tsx	Candidate titles now wrap within their clamped display; monitoring card columns, configurable pill classes, and the mobile evidence header layout were adjusted.
Service status chip styling src/components/services/service-detail-page.tsx	Status chips now use updated radius, vertical padding, and non-shrinking indicator dots.

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

---

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	PR notes say "drove every production route..." and "Composer geometry verified..." without exact command/result wording, which the check forbids.	Rewrite verification claims as explicit entries, e.g. "Ran npm run verify:ui: passed" or "Not run: reason," and avoid vague "verified"/"completed successfully" phrasing.
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 is concise and accurately summarizes the main responsive layout fix across the site.
Description check	✅ Passed	The description follows the template with Summary, Verification, Clinical Governance Preflight, and Notes, and includes relevant testing details.
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 TS/TSX source and test files changed; no secrets, .env files, logs, caches, build outputs, or other sensitive/generated artifacts were found.
Risky Git Or Deployment Actions	✅ Passed	PR only changes styling/layout in five TSX component files; no docs, workflows, scripts, or instructions recommend force-push/reset/deletion/rebase/destructive deploy actions.
Supabase Project And Schema Safety	✅ Passed	No Supabase config, env, migration, RLS, or policy changes; diff only adjusts eval scoring/tests and a comment mentioning the live project.
Runtime And Package Manager Integrity	✅ Passed	Diff only touches TSX layout files; no package/runtime files changed, and repo still pins npm@11.17.0 with Node 24.x/npm 11.x and engine-strict=true.
Api Route Failure Handling	✅ Passed	PASS: No API/server route/provider code changed; the RAG eval-only additions still fail when expected docs disappear and are covered by regression tests.

✨ 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/responsive-design-review-4d7395

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/responsive-design-review-4d7395

---

_{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 ↗︎.

[BigSimmo]

@copilot resolve the merge conflicts in this pull request

[BigSimmo]

@copilot resolve the merge conflicts on this branch.

[Copilot]

@copilot resolve the merge conflicts on this branch.

Resolved the merge conflicts on this branch and merged origin/main into it in commit 6c57bd9.

[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 `@src/components/master-document-flow-mockups.tsx`:
- Around line 1599-1605: Update the evidence header around the Evidence h1,
Pill, and actions container so the title/pill area uses min-w-0 flex-1, allowing
it to shrink on narrow screens while preserving space for the actions. Ensure
the Pill’s text remains truncated when evidence.label is long, without changing
the actions behavior.

🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ba65f02c-4c2a-4c99-ad23-bb8ab6b0a8a5

📥 Commits

Reviewing files that changed from the base of the PR and between c5e7c76 and 6c57bd9.

📒 Files selected for processing (6)

• src/components/DocumentViewer.tsx
• src/components/applications-launcher-page.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• src/components/differentials/differential-presentation-workflow-page.tsx
• src/components/master-document-flow-mockups.tsx
• src/components/services/service-detail-page.tsx

Ok

[BigSimmo]

@codex resolve all comments and CI

[coderabbitai]

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

The agent ran but didn't make any changes. The issues may already be fixed or require manual intervention.

[chatgpt-codex-connector]

Summary

• Confirmed the unresolved CodeRabbit comment is already addressed in the current branch: Pill now accepts a className override so callers can opt into shrinkable/truncated layout behavior. src/components/master-document-flow-mockups.tsxL294-L305 src/components/master-document-flow-mockups.tsxL320-L325
• Confirmed the mobile Evidence header now wraps the title and pill in min-w-0 flex-1, applies min-w-0 flex-1 to the pill, and keeps the actions button in a non-shrinking container so narrow screens preserve action space. src/components/master-document-flow-mockups.tsxL1602-L1609
• No additional tracked source changes were needed in this run, so I did not create an extra commit or call the PR creation tool.

Testing

• ⚠️ npm run verify:cheap — initial attempt failed because the local environment was using Node 20 and had no installed dependencies (tsx missing).
• ✅ npx -y -p node@24.18.0 -p npm@11.17.0 npm ci — installed dependencies with the repo-required Node/npm versions; audit reported 0 vulnerabilities.
• ✅ npx -y -p node@24.18.0 -p npm@11.17.0 npm run verify:cheap — passed: runtime, GitHub Actions pin check, sitemap check, brand check, type-scale check, icon-scale check, lint, typecheck, and Vitest (177 passed | 1 skipped, 1667 passed | 1 skipped).

View task →