redesign(forms): full-width search results with collapsible refine bar

[BigSimmo]

Summary

• Fix the Forms search results table being clipped behind the right rail at sub-desktop widths (fixed-width grid columns + overflow-hidden chopped the "Matched because"/"Open" columns).
• Remove the right rail entirely along with the Next steps and Source snapshot cards; Best matches now spans the full page with fluid minmax(0,…) columns that cannot overflow, and the desktop table now starts at md (768px) instead of lg.
• Replace the rail Refine card (and the dead mobile "Filters" stub) with a collapsible Refine bar next to the results tabs — active-filter count badge, aria-expanded/aria-controls, responsive 1/2/4-column filter panel.
• Fix a second latent overflow: the nowrap tab strip set the grid column base wider than the viewport at tablet widths (min-w-0).
• Polish mobile result cards (44px code badge, 32px open target, unclamped match reason).

Screenshot/overflow sweep at 390/768/1024/1280/1536px: 0px horizontal overflow at every width.

Verification

• npm run verify:pr-local — exit 0: runtime check, format:check, lint, typecheck, full vitest (1440 passed / 1 skipped), production build (624 pages)
• npm run verify:ui — 117/124; 4 of the 7 failures passed on isolated rerun (load flakes), and the remaining 3 (document search mode lists matching documents, tools launcher is usable at mobile, mode home routes center the shared search on mobile) fail identically with pristine origin/main content swapped in — pre-existing on main / local-env, not caused by this diff. All 4 forms-search specs pass repeatedly.
• npm run verify:release — not run (not a release/handoff claim)
• npm run eval:retrieval:quality — N/A: no retrieval/ranking/selection/chunking/scoring changes
• npm run eval:rag -- --limit 15 — N/A: no answer-generation changes
• npm run check:production-readiness — N/A: no clinical workflow/privacy/env/Supabase changes
• npm run check:deployment-readiness — N/A: no deployment changes

Clinical Governance Preflight

Not applicable — single client component redesign of the Forms search results page; no ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output changes.

Notes

• Diff vs main is exactly one file: src/components/forms/forms-search-results-page.tsx.
• Branch was cut clean from origin/main + cherry-pick so the unpushed local docs commit (648abfa) riding in this worktree is NOT included.
• All existing Playwright test ids, "Best matches" text, and Open <title> aria-labels preserved.

🤖 Generated with Claude Code

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d3958be6-1ceb-487b-a029-5e5f1ca4f549

📥 Commits

Reviewing files that changed from the base of the PR and between 2ba6d24 and 919555f.

📒 Files selected for processing (1)

• src/components/forms/forms-search-results-page.tsx

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

• src/components/forms/forms-search-results-page.tsx

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added a top-level Refine toggle that opens/closes a collapsible filter panel.
  • Shows the number of active filters.
  • Reworked “Best matches” to present clearer, more readable match reasons.

• Improvements

  • Updated desktop/tablet results layout and row structure for better readability and spacing.
  • Refreshed mobile search cards, pathway controls, and “Open”/“View all forms” link styling.
  • Enhanced accessibility for expandable controls and external link icons.

Walkthrough

The forms search results page replaces the desktop refine rail with an expandable top refine panel. It adds refine filter configuration and accessible toggle state, updates desktop result rows and links, and revises mobile cards, pathways, spacing, and responsive layout placement.

Changes

Forms Search Results UI

Layer / File(s)	Summary
Expandable refine controls src/components/forms/forms-search-results-page.tsx	Adds refine filter metadata, an expandable RefineBar, a conditional RefinePanel, accessible panel identifiers, and responsive page wiring.
Desktop result rows and links src/components/forms/forms-search-results-page.tsx	Updates result tabs, grid sizing, row structure, status placement, match-reason typography, and navigation links.
Mobile results and pathways src/components/forms/forms-search-results-page.tsx	Reworks mobile cards, match-reason text, view-all navigation, pathway pills, chevrons, and responsive styling.

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

Sequence Diagram(s)

sequenceDiagram
  participant FormsSearchResultsPageContent
  participant RefineBar
  participant RefinePanel
  FormsSearchResultsPageContent->>RefineBar: render refine toggle
  RefineBar->>FormsSearchResultsPageContent: update refineOpen
  FormsSearchResultsPageContent->>RefinePanel: render panel by refineOpen
  RefinePanel->>RefinePanel: display refine filters and Reset state

Loading

🚥 Pre-merge checks | ✅ 11

✅ Passed checks (11 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main UI redesign: full-width search results with a collapsible refine bar.
Description check	✅ Passed	The description follows the template with Summary, Verification, Clinical Governance Preflight, and Notes, and it includes relevant test results.
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.
Generated And Sensitive Files	✅ Passed	Only src/components/forms/forms-search-results-page.tsx changed; git status is clean and diff scan found no secrets, credentials, logs, caches, node_modules, or build artifacts.
Verification Claims	✅ Passed	Verification claims are paired with explicit checks/commands and results, e.g. npm run verify:pr-local exit 0 and npm run verify:ui with outcome details.
Risky Git Or Deployment Actions	✅ Passed	The only PR file is a UI component, and the patch scan found no force-push, reset, delete-branch, destructive cleanup, or deployment guidance.
Supabase Project And Schema Safety	✅ Passed	PR only changes a client-side forms search page; the diff has no Supabase refs, migrations, RLS/policy updates, or env/project configuration.
Runtime And Package Manager Integrity	✅ Passed	Only src/components/forms/forms-search-results-page.tsx changed; package/runtime files are untouched, preserving Node 24/npm 11.
Api Route Failure Handling	✅ Passed	Only a client-side Forms search-results UI file changed; no API/server/provider code was touched, and registry loading/unauthorized/error states are handled explicitly.

✨ 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 claude/forms-search-results-redesign

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch claude/forms-search-results-redesign

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 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/forms/forms-search-results-page.tsx`:
- Around line 53-64: The refineFilters entries for “Official forms” and “Pathway
linked” are marked enabled without affecting results, causing an inaccurate
active filter count. In the refineFilters and result-building logic around
matches/scopedMatches and ToggleSwitch, either implement each filter’s state and
apply it when constructing results before calculating activeCount, or mark these
preview filters disabled and keep activeCount at zero until implemented.
- Around line 674-680: Gate the VerifiedFooter rendering on registry readiness
so it cannot appear during loading, unauthorized, or failed registry states.
Locate the registry state branching in the component containing PathwayPanel and
MobilePathway, and move VerifiedFooter into the registryReady branch; otherwise
update its wording to be explicitly status-independent.

🪄 Autofix (Beta)

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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9b1947ea-7a87-45df-b89f-91686f4642c5

📥 Commits

Reviewing files that changed from the base of the PR and between b7d877b and 2ba6d24.

📒 Files selected for processing (1)

• src/components/forms/forms-search-results-page.tsx