fix(search): salvage Also-matches phone spacing without reverting #1616

[BigSimmo]

Summary

Replaces #1604, which is being closed. That PR's merge commit c593e624 resolved tests/ui-smoke.spec.ts entirely to the branch side, discarding every change #1616 had already landed on main. CI confirmed it rather than merely predicting it — Production UI critical failed on a re-hardcoded 14px action font size against the current --text-sm of 0.8125rem (13px).

This branch re-applies only the work that was actually intended, on top of current main:

• universal-search-also-matches.tsx — collapsed "Also matches in other modes" disclosure becomes a raised card; phone toggle gets a full min-h-tap (48px) hit target, leading Layers icon, count badge and short subtitle; subtitle and indeterminate … badge excluded from the accessible name; phone bottom clearance via max-sm:mb-4 as content spacing (not a chrome/dock reserve restore).
• globals.css and tests/helpers/style-contracts.ts — supporting tokens and contract entries.
• tests/ui-smoke.spec.ts — only the one edit Improve “Also matches in other modes” phone spacing and tap target #1604 intended: include vertical margins in the alsoMatchesHeight measurement so the phone bottom margin does not eat the phantom-scroll budget. Applied to main's current version of the test, so the file is +13/−2 rather than Improve “Also matches in other modes” phone spacing and tap target #1604's +61/−152.

Additionally fixes a defect #1604 carried, which is what made it red on check:design-system-contract: the desktop "Across Clinical KB" label used --text-soft, a deprecated alias of --decoration-soft that the design system pins below 4.5:1 and explicitly bans on text nodes (docs/design-system/GATES.md §1, TOKENS.md). It now uses --text-muted, matching the sibling subtitle. That is an accessibility fix, not a gate workaround.

Verification

• npm run test — 504 files passed, 5327 passed / 4 skipped, 0 failed. The full suite rather than a focused run because test:focused fails closed on changed test infrastructure (tests/helpers/style-contracts.ts) and instructs exactly this.
• npm run check:design-system-contract — passes; Text-role ratchet: --text-soft consumers 0 (was 1 on Improve “Also matches in other modes” phone spacing and tap target #1604), plus design-system adoption checked: 53 components, 55 roots and design-sync contract checked: 53 components and 7 guidelines.
• npx eslint src/components/clinical-dashboard/universal-search-also-matches.tsx --max-warnings 0 — exit 0.
• npm run format run and committed; npx prettier --check . repo-wide — All matched files use Prettier code style!
• Revert check: git diff --stat origin/main -- tests/ui-smoke.spec.ts is +13/-2, confirming none of ui: complete and activate the v2 design system #1616's content is removed.
• npm run verify:ui — not run locally. The changed Chromium assertion is in ui-smoke.spec.ts; CI's Production UI critical on this head is the authoritative run, and it is the exact job that caught Improve “Also matches in other modes” phone spacing and tap target #1604. Treat this as unproven until that job reports green.

Risk and rollout

• Risk: low. Presentation-only change to an existing disclosure; expand/search deferral behaviour unchanged. Desktop (sm+) behaviour unchanged. The --text-soft → --text-muted swap raises contrast, so it cannot regress legibility.
• Rollback: revert the single commit.
• Provider or production effects: none.

Clinical Governance Preflight

Not clinical-risk scope: phone spacing and tap-target chrome on an existing search disclosure. No ingestion, answer generation, retrieval/ranking, source rendering, document access, privacy, or production env changes.

RAG impact: no retrieval behaviour change — presentation-only changes to a cross-mode disclosure component; no file under any retrieval, ranking, selection, or answer-ranking surface is touched.

---

Generated by Claude Code

Summary by CodeRabbit

• New Features

  • Added match counts, mobile subtitles, and badges to the related matches panel.
  • Added responsive disclosure controls and “View all” links for easier navigation.
  • Improved match cards with clearer typography, accent styling, and larger touch targets.

• UI Improvements

  • Restyled the related matches panel as an inset raised card on mobile.
  • Improved spacing, safe-area margins, and full-bleed medication workspace behavior.

• Bug Fixes

  • Improved mobile layout consistency and scroll-area measurements for the related matches panel.

[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

Run ID: 7c8a7ff3-3afb-4cf8-b4ad-fc614964b739

📥 Commits

Reviewing files that changed from the base of the PR and between ae9508d and f1488cb.

📒 Files selected for processing (1)

• src/app/globals.css

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

• src/app/globals.css

---

📝 Walkthrough

Walkthrough

The responsive “Also matches” panel now shows match counts, mobile subtitles, disclosure controls, raised-card styling, and updated related-mode cards. CSS separates the patient strip from the panel. Style contracts and mobile geometry tests reflect the new layout.

Changes

Responsive Also Matches panel

Layer / File(s)	Summary
Panel states and responsive presentation src/components/clinical-dashboard/universal-search-also-matches.tsx, src/app/globals.css	The panel derives match counts and mobile subtitles. Its responsive header, disclosure controls, spacing, borders, cards, and touch targets are updated.
Style contracts and geometry validation tests/helpers/style-contracts.ts, tests/ui-smoke.spec.ts	Style-contract parsing comments and exemptions are updated. The geometry test includes the panel’s vertical margins.

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

Possibly related PRs

• BigSimmo/Database#1604: Directly modifies the same CSS, component, style-contract, and smoke-test logic.
• BigSimmo/Database#745: Modifies UniversalSearchAlsoMatches responsive behavior.
• BigSimmo/Database#688: Introduces the related medication “also matches” component and mobile layout.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the search disclosure phone-spacing fix and its relationship to #1616.
Description check	✅ Passed	The description covers the changes, verification results, pending UI verification, risk, rollback, and governance scope.
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.

---

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

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.