Optimise phone touch targets and fix Therapy Compass mobile overflow

[BigSimmo]

Summary

A touch-optimisation convergence pass for phone. No visual redesign — this closes the gap between the design system's 44px tap contract (--spacing-tap → min-h-tap/size-tap) and interactive controls that were still 32–40px, and fixes horizontal-overflow that clipped clinical content in Therapy Compass on a phone. Desktop is deliberately preserved throughout.

Tap targets raised to the 44px floor on phone:

• Answer suggestion/follow-up chips: 32px → 44px with an 8px gap, under pointer: coarse only (mouse users keep the compact 32px chip — no desktop change).
• ClinicalDashboard: Stop, Show/Hide previous answer, Show earlier messages.
• Header/shell: guide close button; workflow icon-cluster gap 6px → 8px.
• Services results (bookmark/open/select) + service/form toast dismiss.
• Differentials home: open links, best-answer + urgent rows, empty-state/run-source CTAs.
• Favourites hub + command library: filter chips, type dropdown, sort, Continue CTA, row-actions menu.
• Formulation builder + home controls.
• DocumentViewer: hit prev/next (36px squares 6px apart → 44px, 8px gap); summary/secondary controls use min-h-tap sm:min-h-9 (phone 44, desktop 36); medication + patient-profile buttons.

Therapy Compass mobile overflow (was clipping clinical data):

• Fixed/minmax multi-column grids (review queue, recommend rows, 2-column detail/sheets/brief/pathways, result card) now stack to a single column under 640px via a scoped tc-stack-sm class — previously the Index/Review completeness columns and contraindication cells were cut off the right edge with no way to reach them.
• The comparison table scrolls horizontally (tc-scroll-sm) instead of clipping the right-hand therapies.
• Nav, tabs, segments, chips and remaining controls raised to the 44px tap floor.

Verification

• typecheck — clean (no src/ errors)
• eslint on all changed files — clean (0 errors)
• check:type-scale + check:icon-scale (--strict) — pass (no arbitrary text-[Npx], no retired icon half-steps)
• Unit suite — 2681/2682 pass. The single failure (pdf-extraction-budget.test.ts, a Python child-process-kill timing test) fails deterministically in isolation and is unrelated to this UI/CSS diff — a pre-existing environment limitation (the Python OCR/worker stack isn't runnable here)

Verification not run: npm run verify:pr-local — the repo Playwright/browser gate can't launch a browser in this environment (installed Playwright wants browser build 1228; only 1194 is present), so verify:pr-local's conditional build/UI steps can't complete here.

UI verification not run: the same Playwright browser-version mismatch prevents the repo UI gate from launching a browser here. Substituted a manual Playwright pass at 390×820 with the pinned chromium-1194 binary: 0 horizontal overflow on every route, tap targets measured at 44px (e.g. ServiceCard Open/Select; chips 44px under pointer:coarse, 32px under pointer:fine), Therapy Compass overflow fixes confirmed (stacked screens + horizontally-scrollable comparison table), desktop unchanged.

Risk and rollout

• Risk: Low. Changes are tap-target sizing, control gaps, and phone-only responsive layout; desktop appearance is preserved (chip fix is pointer:coarse-scoped; Therapy Compass responsive rules are @media (max-width:640px) scoped to .tc-root; desktop-compact controls kept via sm:min-h-9).
• Rollback: revert the single commit; all changes are additive CSS/className/token swaps with no logic changes.
• Provider or production effects: None.

Clinical Governance Preflight

UI-only tap-target sizing and phone layout. No ingestion, answer generation, search/ranking, source-governance, or document-access logic was changed; DocumentViewer is touched only for control heights/gaps, so source rendering, citations, review-status and outdated/unknown-source behaviour are unchanged.

• 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

Therapy Compass is a promoted design-export that still uses inline CSS-in-JS; the responsive fixes are added as scoped, phone-only rules in styles.tsx plus minimal class hooks, so desktop rendering is unchanged. Bringing it fully onto the token system remains separate follow-up work.

🤖 Generated with Claude Code

https://claude.ai/code/session_01YKNwAjDBUTv5khn64QKwHW

Summary by CodeRabbit

• Accessibility & Usability
  • Improved tap-target sizing across dashboards, forms, favourites, services, prescribing, and document controls (buttons, links, chips, filters, menus, dismiss controls).
  • Enhanced touch chip spacing for coarse-pointer devices and refined focus/hover alignment on key controls.
• Responsive Design
  • Therapy Compass phone layouts now prevent content clipping via single-column stacking.
  • Comparison tables support horizontal scrolling on smaller screens.
• Visual Updates
  • Standardized button dimensions (including several to 44px) and consistent alignment/padding for a more uniform interface.

[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: e8c96b97-e5f6-41e7-9ba2-64b32d0dc7e7

📥 Commits

Reviewing files that changed from the base of the PR and between fe501a0 and 755da28.

📒 Files selected for processing (3)

• src/components/clinical-dashboard/master-search-header.tsx
• src/components/therapy-compass/screens/other-screen.tsx
• src/components/therapy-compass/screens/sheets-screen.tsx

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

• src/components/therapy-compass/screens/other-screen.tsx
• src/components/clinical-dashboard/master-search-header.tsx
• src/components/therapy-compass/screens/sheets-screen.tsx

---

📝 Walkthrough

Walkthrough

The PR standardizes mobile tap-target sizing across application controls and adds Therapy Compass phone-specific stacking and horizontal scrolling. Logic, state handling, event handlers, and exported APIs remain unchanged.

Changes

Mobile responsive UI

Layer / File(s)	Summary
Shared styling primitives src/app/globals.css, src/components/therapy-compass/{bindings.tsx,controls.ts,styles.tsx}	Coarse-pointer chips, Therapy Compass controls, phone stacking, and comparison-table scrolling use updated responsive sizing and layout rules.
Application control sizing src/components/ClinicalDashboard.tsx, src/components/DocumentViewer.tsx, src/components/clinical-dashboard/..., src/components/forms/..., src/components/formulation/..., src/components/services/...	Interactive dashboard, document, form, formulation, favourites, medication, patient, differential, and service controls adopt shared tap-target sizing and responsive height classes.
Therapy Compass screen integration src/components/therapy-compass/screens/..., src/components/therapy-compass/therapy-card.tsx	Therapy Compass layouts add small-screen stacking or scrolling hooks, while buttons and inputs increase to 44px sizing.

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

Possibly related PRs

• BigSimmo/Database#476: Overlaps with the forms search RefineBar control styling.
• BigSimmo/Database#477: Overlaps with the medication prescribing “Show all matches” control.
• BigSimmo/Database#646: Shares the Therapy Compass responsive styling scaffold.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 6.90% 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 summarizes the two main changes: phone touch-target optimization and Therapy Compass mobile overflow fixes.
Description check	✅ Passed	The description follows the template and includes Summary, Verification, Risk and rollout, Clinical Governance Preflight, and Notes with concrete 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.

✨ 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-touch-optimization-673ur4

---

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