Fix differentials mobile search formatting

[BigSimmo]

Summary

Phone differentials search results were cramped on small screens. This PR reformats mobile result cards so titles, Emergent badges, chips, ranks, and the Compare FAB render correctly without overflow or skipped numbering.

Changes

• Restructure MobileResultCard: rank + title + checkbox (no icon column); status badge and match label on a dedicated meta row; show subtitle; larger readable chips with min-w-0 truncation
• Clamp compact Best Answer titles to two lines
• Number the phone list contiguously after hiding the best-answer duplicate
• Increase results bottom padding so the last card clears the compare FAB; widen page padding to px-4
• Tighten Playwright proofs for ranks, badge-below-title layout, card horizontal overflow, and FAB clearance

Verification

• Focused Chromium differentials mobile proofs in tests/ui-tools.spec.ts (badge placement, contiguous ranks, card overflow, compare FAB clearance)
• tests/mobile-interaction-regressions.test.ts
• npx prettier --check on touched files
  UI verification not run: full npm run verify:ui suite not executed in this environment; focused Chromium differentials mobile proofs above cover the changed phone results surface.

Risk and rollout

• Risk: low; presentation-only mobile layout for differentials search cards and compare FAB clearance; no ranking, retrieval, or clinical content changes.
• Rollback: revert this PR / restore prior differentials-home.tsx and tests/ui-tools.spec.ts.
• Provider or production effects: None

Clinical Governance Preflight

• 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

• Desktop DesktopResultRow unchanged.
• Screenshots from local phone viewport spot-check (390×844): mid-list and scrolled-to-bottom compare FAB clearance.

  

Summary by CodeRabbit

• Bug Fixes

  • Improved mobile differential result cards to prevent text/content overflow and keep rankings sequential when excluding the duplicate “Best answer” row.
  • Refined mobile “Best answer” and result card layout (titles, subtitles, status badge placement) for more consistent rendering.
  • Ensured the compare action/CTA remains accessible and clears correctly as users scroll through results.

• UI Improvements

  • Enhanced mobile tag chip presentation, including showing an extra “+N” chip when more tags exist than the initial display limit.
  • Added additional test identifiers to improve UI reliability checks.

[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

Mobile differential cards now update chip truncation, title and metadata layout, ranking, and spacing. UI tests verify sequential ranks, badge placement, horizontal containment, and clearance from the floating compare action.

Changes

Mobile differentials

Layer / File(s)	Summary
Mobile card rendering and ranking src/components/clinical-dashboard/differentials-home.tsx	Mobile result cards update chip styling, tag overflow handling, metadata layout, title clamping, bottom spacing, and ranking when the best-answer duplicate is hidden.
Mobile layout regression coverage tests/ui-tools.spec.ts	Tests verify sequential ranks, separate status-badge placement, horizontal containment, and clearance between the final card and floating compare action.

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

Possibly related PRs

• BigSimmo/Database#684: Updates mobile differentials compare behavior and related geometry assertions.
• BigSimmo/Database#877: Modifies mobile differentials layout and compare CTA geometry assertions.
• BigSimmo/Database#886: Changes mobile results spacing and overflow behavior.

Suggested labels: codex

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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
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.
Title check	✅ Passed	The title clearly and concisely summarizes the main change to mobile differentials search formatting.
Description check	✅ Passed	The description matches the template with Summary, Verification, Risk and rollout, Clinical Governance Preflight, and Notes filled in.

✨ 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 cursor/fix-differentials-mobile-d760

---

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

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[BigSimmo]

@coderabbitai please resolve merge conflicts for me

[coderabbitai]

✅ Merge conflicts resolved successfully!

Resolved 1 conflict file(s). Commit: def26cd7607983d98687e66270b61d215916ec63 pushed to cursor/fix-differentials-mobile-d760.

2 file operation(s)

• src/components/clinical-dashboard/differentials-home.tsx (update)
• tests/ui-tools.spec.ts (update)

View agent analysis

[BigSimmo]

@cursoragent Please can you resolve the PR policy failing CI test for me

[cursor]

PR policy is green again.

The check failed because the body was missing the required evidence sections for a clinical/UI path. I updated the PR description with:

• checked Verification results plus UI verification not run: … (focused Chromium proofs instead of full verify:ui)
• Risk and rollout with substantive Risk/Rollback
• completed Clinical Governance Preflight checklist

Local evaluatePullRequestPolicy and CI PR policy both pass on PR #929.