feat(search): phone toggle for cross-mode matches + tidy sort control#745
Merged
Conversation
…y sort control On phones the "Also matches in other modes" panel now renders as a collapsible disclosure (collapsed by default) with a count badge and a rotating chevron so it reads clearly as a toggle instead of consuming a full stacked grid. Desktop keeps the always-open four-column grid, so the toggle state only governs the narrow-viewport layout. Also restyles the results sort control: the native <select> chrome is stripped with appearance-none so "Relevance"/"A–Z" render at the same size and weight as the rest of the band, with a fixed custom caret slot. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H8VhDNjeDXJaVnwufhRKLV
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe clinical dashboard sort control receives a custom icon and updated select styling. The universal search “Also matches” panel gains a responsive, ARIA-connected collapsible header for narrow screens while remaining visible on larger screens. ChangesClinical dashboard UI
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant UniversalSearchAlsoMatches
participant AlsoMatchesGrid
User->>UniversalSearchAlsoMatches: Activate the also-matches header
UniversalSearchAlsoMatches->>UniversalSearchAlsoMatches: Toggle expanded state
UniversalSearchAlsoMatches->>AlsoMatchesGrid: Apply visibility and layout classes
AlsoMatchesGrid-->>User: Show or hide mode cards and View all links
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Collapse the single-line className cn() call flagged by prettier --check in CI (Static PR checks / format:check). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H8VhDNjeDXJaVnwufhRKLV
BigSimmo
marked this pull request as ready for review
July 17, 2026 19:33
BigSimmo
enabled auto-merge
July 17, 2026 19:33
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@src/components/clinical-dashboard/universal-search-also-matches.tsx`:
- Around line 73-99: Update the header control around the button’s expanded
state so desktop behavior matches the always-visible panel: suppress pointer
interaction at the sm breakpoint and ensure accessibility state reports expanded
on desktop, using the component’s existing responsive state approach or
rendering a non-interactive desktop header while preserving the mobile toggle
behavior.
🪄 Autofix (Beta)
❌ Autofix failed (check again to retry)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 672c0820-1053-489b-850f-371c9e08c04f
📒 Files selected for processing (2)
src/components/clinical-dashboard/search-results-header-band.tsxsrc/components/clinical-dashboard/universal-search-also-matches.tsx
…always open The disclosure button reported aria-expanded=false on desktop even though the sm:grid panel is always visible, and stayed clickable/focusable with no visible effect. Track the sm breakpoint via matchMedia and, on desktop, report aria-expanded=true, drop the button from the tab order (tabIndex -1), and add sm:pointer-events-none so screen-reader and keyboard users see the header as static copy rather than a collapsed control. Phone behaviour is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H8VhDNjeDXJaVnwufhRKLV
Contributor
|
Note Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. Autofix skipped. No unresolved CodeRabbit review comments with fix instructions found. |
This was referenced Jul 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
sm:and up), so there is no SSR/hydration flash or desktop layout shift.selectchrome is stripped withappearance-noneso "Relevance" / "A–Z" render at the same size and weight as the rest of the header band, with "Sort" as a muted label and a fixed custom caret slot (ChevronsUpDown). This fixes the mismatched/oversized "Relevance" text on mobile.Both are edits to shared components (
universal-search-also-matches.tsx,search-results-header-band.tsx), so the behaviour is consistent across every mode that uses them (Services, Forms, Differentials, Medication, Favourites, Documents, Formulation, Answer).Verification
npm run verify:pr-localnpm run verify:uiVerification not run: the full
npm run verify:pr-localgate was not run in this sandbox. Checks that were run and passed:npm run typecheck(no errors in the changed source — remaining failures are pre-existing missing test dev-deps),eslinton both changed files, andnpx vitest run tests/result-sort.test.ts(3/3).UI verification not run: the project pins a Playwright browser revision that is not installed in this sandbox (only the pre-installed Chromium 1194 is available), so
npm run verify:ui/test:e2ecannot launch. Behaviour was instead verified against the running dev server with the pre-installed Chromium and screenshots — phone (390×844) shows the panel collapsed to a single toggle row that expands to four mode cards with a rotating chevron; desktop (1280×900) is unchanged and the sort control renders cleanly.Risk and rollout
Clinical Governance Preflight
Path-based classification flags these components (they live under
clinical-dashboard/and matchsearch) even though the change is purely presentational. Every invariant below is preserved — no ingestion, answer generation, retrieval/ranking, source rendering, document access, privacy, or clinical-output behaviour was changed.Clinical KB Database(sjrfecxgysukkwxsowpy)Notes
buttondisclosure on all breakpoints; on desktop it is made inert (sm:cursor-default, panel forced open viasm:grid) so the single accessible-name element required by the existing tests is preserved without duplicating the heading text.🤖 Generated with Claude Code
Summary by CodeRabbit