feat(differentials): make result cards open on tap and lift their design

[BigSimmo]

Summary

• Made the whole differential result card open the record. Previously only the title text was a link and the rest of the card was inert, so there was no visible answer to "where do I click to open this?". The existing title link now stretches a pseudo-element across the card rather than adding a second overlay anchor, so assistive technology still hears one link named by the title.
• Added an explicit Open differential / Open presentation affordance with a chevron on every card, as visible text naming that hit area.
• Reworked the compare control so it cannot be confused with opening the card: on phone cards it is now a labelled Compare / Added pill sitting in a footer action row opposite the open affordance; desktop rows keep the compact box in their trailing column. Both remain a real checkbox input with the same data-testid hooks and the same accessible name.
• Added a left urgency rail (emergent / urgent / investigations) so triage priority is legible before any text is read, and lifted the card design: rounded-xl, a hover elevation and background shift on desktop rows, a press state on phone cards, and a wider trailing column so the open affordance fits on one line.
• Fixed a defect introduced mid-change: ringing the stretched pseudo-element stacked a second focus ring, because the shared :focus-visible rule in globals.css is unlayered and wins over an outline-none utility. The focus ring now stays singular on the title, as the focus is singular assertion in ui-smoke requires.

Behaviour verified in a real browser at 390px and 1440px: clicking the card body navigates to the differential, and clicking the compare control toggles selection without navigating.

Verification

• npm run verify:pr-local — check:runtime, check:installed-lock-parity, format:changed, lint, typecheck all completed. The unit suite reported 3 failures on the first run; all 3 reproduce on a clean tree at this base and 2 were shallow-clone artefacts that cleared after git fetch --deepen=2000.
• Full unit suite after deepening: Test Files 1 failed | 931 passed (932) / Tests 1 failed | 11714 passed | 4 skipped. The single failure is tests/caring-contacts-contact-time-adjustment.dom.test.tsx, which fails identically with this change stashed — it is a time-of-day dependent test in an unrelated module, not a regression from this diff.
• tests/differentials-compare-selection.dom.test.tsx — Test Files 1 passed (1) / Tests 10 passed (10).
• Chromium journeys for the changed owner: tests/ui-tools.spec.ts + tests/ui-smoke.spec.ts filtered to differential|focus is singular — 16 passed (32.1s).
• Adjacent Chromium journeys: ui-accessibility, ui-smoke, ui-phone-scroll, ui-phone-scroll-page-owned, ui-chrome-scroll — 195 passed (9.2m). Note this run predates the focus-ring fix; the focused re-run above covers the final code.
• npm run verify:ui — not run in full. UI verification partially run: the changed owner's journeys and the adjacent phone/chrome/accessibility specs were proven directly (above); the complete Chromium gate was not run because this change is scoped to one mode's result cards and touches no shared chrome foundation.
• npm run eval:retrieval:quality — not applicable, no retrieval, ranking, selection, chunking or scoring behaviour changed.
• npm run check:production-readiness — not applicable, no clinical workflow, privacy, environment, Supabase, source governance or deployment behaviour changed.

Risk and rollout

• Risk: Low, and presentational. One file changes, src/components/clinical-dashboard/differentials-home.tsx. No data, routing, ranking or clinical logic is touched; the hrefs, the selection state, and the accessible names are all unchanged. The realistic risk is layout: a wider trailing column on desktop rows and a footer action row on phone cards. Both were checked against the narrow-viewport overflow and badge single-line guards, which pass.
• Rollback: Revert the single commit on this branch. There is no migration, no generated artefact, and no state to unwind.
• Provider or production effects: None.
• RAG impact: none

Notes

• The stretched-link pattern means text inside a card is no longer selectable, since the link's pseudo-element covers it. That is the accepted trade for making the whole card a tap target on a phone-first browse list; the full text remains selectable on the record's own detail page.
• scripts/pr-policy.mjs classifies this diff as clinicalRisk: false, operationalRisk: false, ragRanking: false, ui: true, so the Clinical Governance Preflight section does not apply.

🤖 Generated with Claude Code

https://claude.ai/code/session_017QSV1pJvt6QnprenaWFyza

---

Generated by Claude Code

---

Note

Low Risk
Presentational UI in a single file; hrefs, selection state, and accessible names are unchanged—main risk is layout on narrow viewports or mis-taps between open and compare.

Overview
Differential search result cards (desktop rows, mobile cards, and best-match sections) now behave like one primary tap target to open the record, with clearer separation from compare.

The existing title Link gains a stretched ::after hit area (stretchedOpenLinkClass) so tapping anywhere on the card navigates, while screen readers still get a single link named by the title—no duplicate overlay anchor. OpenAffordance adds visible “Open differential” / “Open presentation” (or compact “Open”) plus a chevron so users know where to tap. Focus stays on the title link only, avoiding stacked focus rings that would break the focus is singular UI smoke assertion.

Compare is reworked so it does not read as “open”: SelectionCheckbox can show a Compare / Added pill (showLabel, z-10 above the stretched link). Mobile cards move compare into a footer row opposite the open affordance; desktop keeps the compact checkbox in the trailing column (showLabel={false}).

Visual triage cues get a left StatusRail (emergent / urgent / investigations) aligned with existing status semantics. Cards pick up rounded-xl, hover/press feedback, a wider trailing column for the open label, and the urgency rail on DesktopResultRow, MobileResultCard, and BestAnswerCard (including compact mobile best-match layout tweaks).

^{Reviewed by Cursor Bugbot for commit d44ac43. Configure here.}

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: f8e6ea92-b833-4868-8477-02175f2b02bb

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-08-30T06:58:35.733748Z	547ef42	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_a419de5a-aee8-4136-9a25-d4de9d663231)

[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 ↗︎.

[github-actions]

CI triage

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

• Static PR checks — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
• Production UI (3) — 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 #14502 (failure).

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

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_1c56667e-8d9e-41b6-b93d-04c972ae3397)