Polish and harden the global search composer across breakpoints

[BigSimmo]

Summary

Design/polish pass on the global search composer (the pill + its header) reviewed at desktop, medium (tablet) and small (phone) widths, in light and dark, with a second independent UI review. All changes are scoped to the composer's visual chrome and interactive-control states — no behavioural or data changes.

• Idle send button → clean two-state affordance. When there is nothing to send it now reads as a calm neutral control (surface-subtle fill + inset ring + muted glyph) and turns accent the moment a query makes it actionable, replacing the muddy faded-teal (a 50%-opacity accent fill with a bleeding colour glow) on the empty hero.
• Restore feedback on the + compose trigger. An unlayered background: transparent was silently suppressing both the hover utility and the open-state background, so the primary compose action had no tactile response and stayed flat even while its menu was open. Hover + [aria-expanded="true"] are now restored as unlayered rules.
• Clear (x) button rhythm. It now scales 44→48px at ≥640px so it matches the + and send buttons instead of sitting a size smaller in the pill row on tablet/desktop.
• Consistent submit glyph. The send/spinner icon is unified at 20px (size-icon-lg) with the mode/search affordances it swaps between (was 16px only for those two states).
• Divider refinement. The field/send separator fades at both ends rather than reading as a hard bar.
• Workflow-header mode button responsive fix. Its smaller variant was dead code — the size utilities were duplicated in the shared base string, and Tailwind v4's canonical ordering let the base win at every breakpoint but lg:. Size utilities now live in the per-variant branch so the intended compact size actually applies. The default (main search) header button is unchanged.
• Reduced motion keeps the +→x state. Dropped the motion-safe: gate — the global reduced-motion rule already makes the transform instant, so gating removed the open-state affordance entirely for those users.
• Forced-colors + perf + cleanup. Extended the forced-colors block to force the pill/divider/chip opaque (they used color-mix(...transparent) that thinned system-colour contrast next to the already-forced header); dropped a wasted backdrop-filter on the opaque phone-dock pill; consolidated two duplicate max-width:430px blocks; and removed a dark-mode no-op that was overriding the new hover colours.

Files: src/app/globals.css, src/components/clinical-dashboard/master-search-header.tsx, src/components/clinical-dashboard/mode-action-popup.tsx.

Verification

• npm run verify:pr-local — UI verification not run: sandbox limitation. The environment shipped an incomplete node_modules (test devDependencies absent) and a pre-installed Chromium (1194) mismatched to the pinned Playwright's expected build, so the gate's isolated production build could not run until the dev deps were installed and the browser pinned via PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH. The relevant checks were run directly instead (below), and CI runs the full gates.
• npm run verify:ui — ran the relevant Chromium specs directly:
  • tests/ui-overlap.spec.ts — 12/12 pass (header controls don't overlap at 640/768/1024/1152/1280/1366/1440/1536px; clear button doesn't cover typed text at mobile + desktop; smart-search layout).
  • tests/ui-universal-search.spec.ts — 14/14 pass (command surface / typeahead).
  • tests/ui-accessibility.spec.ts + tests/ui-smoke.spec.ts — 91/92 pass. The one failure (document viewer puts the PDF preview first…) is a pdf.js canvas that does not paint under the mismatched Chromium build; it fails identically on a clean tree (changes stashed), so it is pre-existing/environmental and unrelated to this diff (which does not touch the document viewer).
• npm run typecheck — exit 0 across the project.
• npm run lint — exit 0.

Also verified visually (live rendered screenshots) at desktop/tablet/phone in light + dark, and via computed-style checks confirming: the idle send is surface-subtle/opacity:1, the + hover applies, and the forced-colors pill/divider render opaque.

Risk and rollout

• Risk: Low. UI-only chrome changes (CSS + two className strings + one motion utility). No API, data, auth, retrieval, or provider surface is touched.
• Rollback: revert the single feature commit on this branch and redeploy.
• Provider or production effects: None.

Clinical Governance Preflight

This change is limited to the search composer's visual chrome (CSS + two className strings + one motion utility) and alters no clinical behaviour; the path-based policy classifies it as clinical-risk only because the edited files live under clinical-dashboard. Every invariant below is preserved by the change:

• 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

The full verify:pr-local / verify:ui wrappers were not run verbatim for the sandbox reasons noted under Verification; the constituent UI/lint/type checks were run directly and CI runs the full gates on this PR.

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

📝 Walkthrough

Walkthrough

The changes refine search composer sizing, interaction states, divider rendering, dock and forced-colors behavior, and clinical dashboard mode control sizing and open-state affordances.

Changes

Composer and mode controls

Layer / File(s)	Summary
Search composer controls src/app/globals.css, src/components/clinical-dashboard/master-search-header.tsx	Composer controls gain responsive sizing, hover and disabled states, while header buttons use updated dimensions and shared icon sizing.
Composer rendering states src/app/globals.css	Divider, dark-mode, docked pill, and forced-colors styles are updated for opaque and contrasting rendering.
Mode trigger state src/components/clinical-dashboard/master-search-header.tsx, src/components/clinical-dashboard/mode-action-popup.tsx	Mode trigger sizing is reorganized so workflow dimensions apply correctly, and the open popup icon rotates without motion-preference gating.

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

Possibly related PRs

• BigSimmo/Database#421: Both changes update shared mobile and docked composer styling in src/app/globals.css.
• BigSimmo/Database#478: Both changes modify the ModeActionPopup component.
• BigSimmo/Database#689: Both changes update interactive styling for the mobile search composer controls.

Suggested reviewers: cursoragent, claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly summarizes the main change: polishing the global search composer across breakpoints.
Description check	✅ Passed	The description follows the template closely and includes summary, verification, risk, and governance details.

✨ 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/search-bar-design-polish-3c4gmh

---

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