Mobile Settings: full-screen compact-touch surface

[backnotprop]

Why

The shared Settings dialog was still a dense desktop modal on phones: a centered card, a horizontally scrolling tab strip, small controls, and nested viewport behavior that did not match the compact touch shells around it.

This PR keeps the existing @plannotator/ui Settings implementation and setting bodies, but gives compact-touch sessions a full visual-viewport surface with progressive section navigation. The root screen groups preferences and integrations into large rows; selecting a row opens the unchanged setting content behind a single Back control.

Scope

• Reuses the shared Settings component in plan, annotate, and code review.
• Uses the existing compact-touch media decision and visual-viewport/safe-area infrastructure.
• Keeps one native scroll owner on both the section list and section detail screens.
• Preserves every existing setting, persistence key, default, reset action, host override, and review-only compact behavior.
• Adds 44px touch affordances, 16px compact editable controls, wrapping for long labels, and reduced-motion handling.
• Adds deliberate focus containment/restoration: opening focuses Close (never an editor), Tab stays inside, Escape closes, Back restores the selected section row, and close restores the invoking Options button.
• Refreshes the deterministic Guided Review viewer manifest because the shared compact CSS changes its pinned stylesheet asset.

Non-goals

• No desktop visual redesign.
• No changes to setting semantics or persistence.
• No new mobile component library or forked Settings implementation.
• No claim of physical-device Safari validation in this PR.

Before / after

Matched state: dark Plannotator theme, identity RC QA Persistence, 390×844 viewport. BEFORE was captured from exact origin/main at 1080436d; AFTER was captured from this candidate. Environment: Codex in-app Chromium responsive emulation. The compact-touch media result was forced in the local QA harness because the desktop browser exposes a fine primary pointer; that harness change is not committed.

Plan / annotate shell — 390×844

Before: centered desktop dialog and tab strip	After: full-screen section navigation

Code review shell — 390×844

Before: centered desktop dialog and tab strip	After: shared full-screen section navigation

The image files live only on pr-assets-1384; no screenshot binaries are part of the implementation branch.

Rendered QA

Validated in the in-app Chromium browser at:

• 320×568
• 390×844
• 430×932
• 844×390 landscape
• 820×1180 iPad-sized viewport
• 1440×900 fine-pointer desktop control

Exercised opening/closing, every section in plan/review/annotate, scrolling to the final section, Back navigation, text input, native selects, toggles, light/dark themes, resize/orientation, Escape, Tab containment, and invocation focus restoration. With a text input focused, a visual-viewport contraction from 568px to 400px high kept the stage and single scroll owner aligned; compact editable controls computed to 16px and 44px high.

This was Chromium viewport emulation, not physical iOS Safari. Physical iPhone/iPad Safari validation remains the final follow-up, especially real software-keyboard/browser-chrome interaction and hardware safe-area insets.

Desktop regression statement

The 1440×900 fine-pointer dialog retains the exact origin/main geometry: 672×526.56 at x=384, y=186.72, with the same sidebar/content composition. The only deliberate desktop behavior change fixes a concrete accessibility gap: focus now enters the modal, is contained while it is open, Escape closes it, and focus returns to the invoking Options button.

Automated validation

• DOM_TESTS=1 bun test packages/ui/components/Settings.mobile.test.tsx packages/ui/components/Settings.compactDisplay.test.tsx packages/ui/components/Settings.analysis.test.tsx packages/ui/components/Settings.vim.test.tsx — 13 passed
• bun run typecheck — passed
• bun run build:ui-css — passed
• bun run build:review — passed
• bun run build:hook — passed
• bun run build:opencode — passed
• bun run --cwd apps/guides-show build:viewer && bun run --cwd apps/guides-show check:budgets && bun run --cwd apps/guides-show sync:manifest && bun run --cwd apps/guides-show check:manifest — passed
• git diff --check — passed

Focused coverage proves compact full-stage composition, all section reachability across all three modes, close/Back/focus/Escape behavior, 16px editable styles, touch affordances, reduced motion, compact review behavior, and a desktop-control assertion.