Polish settings switchers on narrow screens

[BigSimmo]

Summary

• Keep equal-layout segmented controls on a single equal-width row, including 320 px settings layouts.
• Tighten settings spacing and clarify the appearance preference copy.
• Expand switch interaction targets to 48 px without enlarging the visible track.
• Add component and Chromium regression coverage for row geometry, label fit, overflow, and touch targets.

Verification

• npm run verify:pr-local
  • Runtime, installed-lock parity, changed-file formatting, lint, and typecheck passed.
  • The full unit suite stopped on unchanged Windows-only tests/pr-handoff-stop.test.ts fixtures (ln unavailable and temporary-directory cleanup returned EPERM); build and RAG fixtures were therefore not reached by this command.
• npm run verify:ui
  • 405 tests passed. Two desktop service-detail scroll-runway tests timed out and reproduced unchanged on base commit 27279b7ae; the settings journey passed within the matrix.
• Focused settings Chromium journey: 1 passed across 320 px, 390 px, and 430 px viewports.
• npm test -- tests/ui-v2-components.dom.test.tsx: 78 passed.
• npm run verify:release — not run because release confidence was not requested.

Risk and rollout

• Risk: Low. These changes affect settings presentation and interaction geometry only; stored preferences and application behavior are unchanged.
• Rollback: Revert commit 37a186ed3.
• Provider or production effects: None.

Notes

RAG impact: no retrieval behaviour change — settings presentation and interaction geometry only.

Physical iPhone Safari and installed-PWA acceptance remain separate from Chromium validation.

Summary by CodeRabbit

• UI Improvements
  • Improved settings controls with clearer appearance options and more consistent spacing.
  • Increased switch tap targets and improved focus visibility.
  • Refined segmented controls for better alignment, spacing, and responsive behavior.
  • Improved reduced-motion behavior for settings controls.
• Accessibility
  • Enhanced mobile touch targets and label alignment.
  • Improved settings layout across smaller screen sizes.

[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:5 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: f68089f7-2f05-4f74-9eaa-aebafd0bf8a1

📥 Commits

Reviewing files that changed from the base of the PR and between d924498 and 3df9dd5.

📒 Files selected for processing (1)

• src/components/ui/segmented-control.tsx

📝 Walkthrough

Walkthrough

The pull request updates responsive segmented controls and settings dialog styling. It adds larger switch focus targets, reduced-motion handling, revised spacing, clearer appearance descriptions, and mobile smoke coverage at narrow viewport widths.

Changes

Mobile settings controls

Layer / File(s)	Summary
Segmented control layout src/components/ui/segmented-control.tsx, tests/ui-v2-components.dom.test.tsx	Equal layouts use non-wrapping, flexible options. Fit layouts use wrapping, intrinsic-width options. DOM tests cover both modes.
Settings dialog accessibility and responsive validation src/components/clinical-dashboard/settings-dialog.tsx, tests/ui-smoke.spec.ts	Updated appearance descriptions and field spacing. Switch focus styling now covers the tap target, and transitions stop under reduced motion. Smoke tests verify 48px controls, aligned radio groups, fitting labels, and narrow viewport layouts.

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

Possibly related PRs

• BigSimmo/Database#685: Related mobile settings responsiveness and UI smoke coverage.
• BigSimmo/Database#736: Related touch-target and segmented-control styling.
• BigSimmo/Database#897: Related switch focus, thumb, motion, and tap-target styling.

Suggested reviewers:claude, cursoragent

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary narrow-screen settings switcher changes.
Description check	✅ Passed	The description covers the change summary, verification results, risks, rollback, production effects, and notes with sufficient detail.
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/chat-settings-switcher-polish-settings-switcher-polish

---

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

[github-actions]

CI triage

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

• Static PR checks — needs investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #9712 (failure).

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

[coderabbitai]

🧹 Nitpick comments (1)

src/components/ui/segmented-control.tsx (1)

108-111: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use theme-backed values for new responsive and switch geometry values.

Both changed components add arbitrary design values instead of named theme values.

• src/components/ui/segmented-control.tsx#L108-L111: replace text-[0.55rem] and min-[360px] with named theme tokens.
• src/components/clinical-dashboard/settings-dialog.tsx#L1265-L1269: replace the 18px and 22px geometry values with named theme tokens.

As per coding guidelines: use Tailwind 4 @theme tokens in src/app/globals.css rather than introducing hardcoded design values.

🤖 Prompt for 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.
In `@src/components/ui/segmented-control.tsx` around lines 108 - 111, Replace the
arbitrary responsive values in segmented-control.tsx lines 108-111, specifically
text-[0.55rem] and min-[360px], with named Tailwind 4 `@theme` tokens defined in
src/app/globals.css. Also replace the 18px and 22px geometry values in
settings-dialog.tsx lines 1265-1269 with corresponding theme-backed tokens;
update globals.css as needed rather than retaining hardcoded design values.

Source: Coding guidelines

🤖 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.
Nitpick comments:
In `@src/components/ui/segmented-control.tsx`:
- Around line 108-111: Replace the arbitrary responsive values in
segmented-control.tsx lines 108-111, specifically text-[0.55rem] and
min-[360px], with named Tailwind 4 `@theme` tokens defined in src/app/globals.css.
Also replace the 18px and 22px geometry values in settings-dialog.tsx lines
1265-1269 with corresponding theme-backed tokens; update globals.css as needed
rather than retaining hardcoded design values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 34e8e605-df3f-4a10-a96d-f44dd4690f99

📥 Commits

Reviewing files that changed from the base of the PR and between 45fd05c and d924498.

📒 Files selected for processing (4)

• src/components/clinical-dashboard/settings-dialog.tsx
• src/components/ui/segmented-control.tsx
• tests/ui-smoke.spec.ts
• tests/ui-v2-components.dom.test.tsx