Refine cross-mode search result typography

[BigSimmo]

Motivation

• Improve the visual hierarchy and readability of the cross-mode search panel by reducing heavy weights and tuning spacing, icon balance, and link affordances.

Description

• Adjusted typography weights from heavy/extrabold to medium/semibold for title, count badge, subtitles, and mode labels in src/components/clinical-dashboard/universal-search-also-matches.tsx to create a clearer hierarchy.
• Tuned card spacing, corner radius, and icon sizing and replaced tight paddings with slightly larger px-3/py-3 and h-9/w-9 icon containers for better balance and touch targets.
• Restyled item links and the “View all” action to use restrained accent/underline treatments with improved line-height and hover feedback instead of very heavy font weights.

Testing

• Ran formatting with npm run format and a diff/check (git diff --check) which passed.
• Ran the focused Chromium e2e spec with npm run test:e2e:chromium -- --grep "keeps compact cross-mode matches visible after submission" and the targeted test passed (1 test).</n- Performed visual verification by launching the local app and capturing the panel at phone (390×844) and desktop (1440×900) sizes using a Playwright capture script, and validated keyboard focus, reduced-motion, and forced-colors behavior; these checks completed successfully.

---

Codex Task

Summary by CodeRabbit

• Style
  • Refined the “Also matches in other modes” section with lighter typography, improved spacing, and larger rounded match cards.
  • Updated the “View all” link with accent coloring and an underline for clearer visibility.

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

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in:30 minutes

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 868ff1b0-b26a-43d8-813f-f47c0aff032b

📥 Commits

Reviewing files that changed from the base of the PR and between 4fab267 and 4b735fe.

📒 Files selected for processing (1)

• docs/branch-review-ledger.md

📝 Walkthrough

Walkthrough

The pull request refines the “Also matches in other modes” component with updated typography, spacing, card styling, icon sizing, and accent-colored link styling.

Changes

Clinical search match styling

Layer / File(s)	Summary
Cross-mode match component styling src/components/clinical-dashboard/universal-search-also-matches.tsx	Updates text weights, related-mode card spacing and corner radius, icon size, result link layout, and “View all” link styling.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• BigSimmo/Database#501: Both update the clinical dashboard’s cross-mode search-match cards.
• BigSimmo/Database#1604: Both modify card styling and “View all” presentation in the same component.
• BigSimmo/Database#1629: This pull request continues styling changes in the same component.

Suggested reviewers:claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly states the motivation, implementation details, and verification results for the UI-only change.
Title check	✅ Passed	The title concisely and accurately identifies the main change to cross-mode search result typography.
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/improve-design-and-optimize-styles

---

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

[github-actions]

CI triage

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

• 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 #9726 (failure).

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

[BigSimmo]

Snapshot:

• PR head: 4fab267f52b72992745e1d2e6975fb4847af447a
• Tip vs origin/main: ahead 4, behind 0 after one required merge origin/main sync
• Mergeable: MERGEABLE
• Merge-tree versus origin/main: clean
• Unresolved actionable review threads: none

Review/fix outcome:

• No PR-file regressions found this sweep; no inline findings raised.
• Scope cleaned by syncing the branch (4fab267f5... -> 4fab267f5), no code fixes required.

Checks on this head:

• Build: pass
• Static PR checks: pass
• Change scope: pass
• PR mergeability: pass
• PR policy: pass
• Safety and config checks: pass
• Semgrep / Semgrep ingestion gate: pass
• Gitleaks / GitGuardian: pass
• Production UI (1), (2): pass
• Production UI critical and Production UI (3): pending
• Unit coverage / PR required: pending

Decisive local proof:

• npm run format (clean)
• git merge-tree $(git merge-base origin/main HEAD) HEAD origin/main => clean
• npm run ledger:append -- --ref 1822 --head 4fab267f52b72992745e1d2e6975fb4847af447a --scope "review-and-fix" ...

Residual risk:

• Required CI runs (Unit coverage, Production UI critical/3, PR required) are still in flight and not yet green at comment time.

[BigSimmo]

PR review summary (review-and-fix)

• Snapshot: PR Refine cross-mode search result typography #1822, branch codex/improve-design-and-optimize-styles, head 4fab267f52b72992745e1d2e6975fb4847af447a.
• Merge state: CLEAN / MERGEABLE.
• Open review threads: none.
• Required checks on this head: all available checks are green (PR policy, mergeability, static checks, safety/config, unit coverage, build, PR required).
• Change scope: one-file delta (src/components/clinical-dashboard/universal-search-also-matches.tsx); reviewed as-is for this scope and found no remaining high-confidence issues.
• Local proof: npx eslint src/components/clinical-dashboard/universal-search-also-matches.tsx (pass).
• Ledger: superseding clean review-and-fix entry appended at this head.

No actionable items remain.

[BigSimmo]

Babiesit sweep summary\n\n- PR head reviewed: 1ceb844 (after 1 sync merge from origin/main)\n- Mergeability snapshot: merge-tree clean\n- Ahead/behind: origin/main...HEAD = 0/6 (ahead of main after sync)\n- Merge-state: BLOCKED\n- Actionable review threads: none\n- Required checks: \n - Gitleaks pass\n - PR policy pass\n - PR mergeability pass\n - Build, Production UI, Unit coverage, Safety, Semgrep, Static PR checks currently in progress\n- Fixes/applicable edits: performed one unblock sync by merging origin/main into the PR branch and pushed 1ceb844\n- Decision: no new P0/P1/P2 findings introduced by this PR review sweep; no blockers other than in-progress required checks.\n\nMerge left to you once pipeline checks settle to green.