Fix clipped focus and mobile interaction states

[BigSimmo]

Summary

• replace stacked/clipped form-field focus halos with a single contained focus treatment
• let the universal search composer own its visible focus state
• improve semantic click/touch behavior for mobile favourite cards and the Therapy Compass clinician switch
• add focused mobile regression coverage

Files

• src/app/globals.css
• src/components/ui-primitives.tsx
• src/components/therapy-compass/bindings.tsx
• src/components/therapy-compass/screens/sheets-screen.tsx
• src/components/clinical-dashboard/favourites-command-library-page.tsx
• tests/ui-smoke.spec.ts

Verification

• npm run verify:cheap — passed after final rebase (264 test files passed, 1 skipped; 2469 tests passed, 1 skipped)
• focused Chromium search/favourite tests — 2 passed after final rebase
• npm run test:e2e:accessibility — 5 passed
• scoped ESLint, Prettier, diff check, type-scale and icon-scale checks — passed
• full npm run verify:ui exceeded the local 20-minute wrapper timeout; its two retained failures were rerun in isolation, and both passed. No task-specific UI test failed.

Risk

Low and limited to shared focus styling plus two mobile interaction controls. No API, Supabase, clinical generation, ingestion, or schema behavior changed.

Summary by CodeRabbit

• UI Improvements

  • Refined keyboard focus indicators for clearer, more consistent visibility across controls and inputs.
  • Improved focus presentation in the answer composer to prevent overlapping focus rings.
  • Made mobile favourite cards easier to select while preserving independent access to links and actions.
  • Increased consistency of mobile action touch targets.

• Accessibility

  • Updated the clinician footer control to expose switch semantics and its current state.

• Bug Fixes

  • Improved mobile interaction behavior and prevented horizontal page overflow.

[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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9c0f9a85-b6cb-49de-9bbc-989f16496825

📥 Commits

Reviewing files that changed from the base of the PR and between 3f06454 and 3a122c0.

📒 Files selected for processing (6)

• src/app/globals.css
• src/components/clinical-dashboard/favourites-command-library-page.tsx
• src/components/therapy-compass/bindings.tsx
• src/components/therapy-compass/screens/sheets-screen.tsx
• src/components/ui-primitives.tsx
• tests/ui-smoke.spec.ts

---

📝 Walkthrough

Walkthrough

Changes

Focus styling

Layer / File(s)	Summary
Global focus rules and validation src/app/globals.css, src/components/ui-primitives.tsx, tests/ui-smoke.spec.ts	Global focus tokens and overlapping utilities are removed, scoped focus-visible rules are added, and mobile focus behavior is covered by smoke tests.

Mobile favourites interaction

Layer / File(s)	Summary
Favourite card controls src/components/clinical-dashboard/favourites-command-library-page.tsx, tests/ui-smoke.spec.ts	Mobile cards use an overlay selection button, layered action controls, updated touch-target sizing, and independent-control smoke-test coverage.

Therapy Compass controls

Layer / File(s)	Summary
Clinician track and footer control src/components/therapy-compass/bindings.tsx, src/components/therapy-compass/screens/sheets-screen.tsx	Clinician-track styling resets border and padding, and the footer toggle uses switch semantics with aria-checked.

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

Possibly related PRs

• BigSimmo/Database#494: Related global focus-visible and focus-ring styling changes.
• BigSimmo/Database#646: Overlapping Therapy Compass bindings and clinician footer control updates.
• BigSimmo/Database#650: Overlapping Therapy Compass implementation changes.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the PR’s main focus on focus styling and mobile interaction states.
Description check	✅ Passed	The description matches the required template sections and provides a clear summary, verification details, and risk assessment.
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/mobile-focus-interactions-20260717

---

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