fix(therapy): use phone space more effectively

[BigSimmo]

Summary

• remove the repeated decorative therapy icon from result-card headings so the clinical title and preview get the available phone width
• let the evidence panel run edge-to-edge on phones while preserving contained tablet and desktop layouts
• keep the three actions equal-width, aligned, and at least 48px high without horizontal overflow
• preserve the compact preview/tag behaviour already on main and keep the unavailable favourite control explicitly disabled

Verification

• npm run format — passed; no formatting changes remained
• npm run test -- tests/therapy-compass-responsive-contract.test.ts tests/therapy-card-preview.test.ts — 2 files passed, 21 tests passed
• npm run test:e2e -- tests/ui-route-coverage.spec.ts --project=chromium --grep "Therapy result cards use the full phone width" — production build and TypeScript passed; 1 Playwright test passed across 320, 390, 639, 768, 1440, and 1920px, including keyboard navigation, reduced motion, and forced colours
• npm run verify:pr-local — partial: runtime, lock parity, changed-file formatting, lint, and typecheck passed; the full unit stage then reported 22 failures in unchanged Windows/bundle test owners (bundle-budget.test.ts and pr-handoff-stop.test.ts), so later build/RAG-fixture steps were not reached

Risk and limitations

• localized presentation-only change; no clinical content, retrieval, ranking, data, API, or production configuration behaviour changed
• full Chromium UI matrix was not run because the focused production journey covers the changed owner and breakpoints directly
• physical iPhone Safari and installed-PWA validation were not run

Rollback

Revert this PR.

Summary by CodeRabbit

• UI Improvements

  • Updated Therapy Compass result cards with a cleaner, more responsive layout.
  • Improved evidence and action spacing across phone and desktop widths.
  • Standardized unavailable Favourite button styling and accessibility behavior.
  • Enhanced Compare and patient-sheet actions for consistent sizing and touch targets.
  • Improved keyboard focus visibility and support for forced-colors display modes.

• Bug Fixes

  • Improved alignment and navigation behavior for result-card actions across screen sizes.

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

📝 Walkthrough

Walkthrough

Changes

Therapy Result Card

Layer / File(s)	Summary
Result card layout and controls src/components/therapy-compass/therapy-card.tsx	ResultCard now renders direct therapy copy, responsive evidence borders, revised spacing, data attributes, shared favourite styling, and constrained action buttons.
Responsive result card validation tests/therapy-compass-responsive-contract.test.ts, tests/ui-route-coverage.spec.ts	Tests validate responsive grids, action sizing, touch targets, focus styling, forced-colors behavior, and keyboard navigation to Therapy Comparison.

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

Possibly related PRs

• BigSimmo/Database#736: Both update responsive ResultCard layout and viewport coverage.
• BigSimmo/Database#897: Both update ResultCard and its responsive contract tests.
• BigSimmo/Database#1783: Both refine the compact ResultCard layout.

Suggested labels: codex

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: improving phone-space usage in therapy result cards.
Description check	✅ Passed	The description covers the change, verification results, risks, rollback, and limitations, with clear reasons for incomplete validation.
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/therapy-mobile-cards-20260810

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

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

[coderabbitai]

🧹 Nitpick comments (1)

src/components/therapy-compass/therapy-card.tsx (1)

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

Move responsive grid sizing into named theme tokens.

Define the desktop column sizing in src/app/globals.css under @theme with the --grid-template-columns-* namespace. Then use the generated md:grid-cols-* utility in src/components/therapy-compass/therapy-card.tsx.

🤖 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/therapy-compass/therapy-card.tsx` around lines 64 - 65, Move
the desktop grid column definition from the inline md:grid-cols value on the
therapy card’s outer grid into a named --grid-template-columns-* token under
`@theme` in globals.css. Update the therapy-card grid to use the generated
md:grid-cols-* utility, preserving the existing responsive column sizing and all
other layout classes.

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/therapy-compass/therapy-card.tsx`:
- Around line 64-65: Move the desktop grid column definition from the inline
md:grid-cols value on the therapy card’s outer grid into a named
--grid-template-columns-* token under `@theme` in globals.css. Update the
therapy-card grid to use the generated md:grid-cols-* utility, preserving the
existing responsive column sizing and all other layout classes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f1688f95-a20d-4961-9163-e91b2002f972

📥 Commits

Reviewing files that changed from the base of the PR and between f7a494b and 5e478b0.

📒 Files selected for processing (3)

• src/components/therapy-compass/therapy-card.tsx
• tests/therapy-compass-responsive-contract.test.ts
• tests/ui-route-coverage.spec.ts

[cursor]

Babysit / unblock summary

• Tip merged: 19921af86ebc → squash a16dd26e56cb8ebc4a1cf49c9c5fce4ec1a7b7ed
• Sync / merge-tree: already clean vs origin/main (behind 0); no sync needed
• Blocked by: required CI in progress only (Production UI shard 2 / PR required)
• Fixed / dispositioned: none — waited for green; no blocking review threads
• Required CI: all green at merge (Static PR, coverage, Build, Production UI critical + shards, PR required)
• Residual risks: therapy phone-card layout on physical Safari/PWA not covered by Chromium CI
• Merge: completed (squash) per sweep request; left to operator normally, executed here because you asked to merge one at a time