Harden secondary inputs for compact touch layouts

[backnotprop]

Summary

• extend the shared compact-touch editable contract to secondary inputs, multiline primitives, and embedded contenteditable editors without changing desktop typography
• keep passive searchable pickers from summoning the touch keyboard, while preserving keyboard-first autofocus for fine pointers
• move legacy editable dialogs and popouts onto the observed visual viewport with safe-area padding, one intentional scroll owner, Escape handling, and focus restoration
• rebuild the code-suggestion editor on the shared Base UI dialog primitive so landscape phones get a contained vertical editor with internal scrolling and 44px actions

Audit coverage

The inventory traced inputs to their owners and rendered entry points across plan review, single-file/folder/URL/app annotation, and code review. It covered file/archive/history/table/tree searches; branch/worktree/model/agent/skill pickers; Ask AI, agent, and Guided Review prompts; comment/redline/label/code-suggestion/source editors; import/export/share, image annotation, add-review, code-file popouts, confirmations, recovery/submission, PR/integration, analysis, tour, and first-use dialogs.

Rendered QA used the Chromium-based Codex in-app browser against local Vite and built CLI-served applications. This is emulation, not physical Safari validation.

Surface	Viewport	Finding	Severity	Resolution / proof
Plan import + secondary text fields	320×568, 390×844	12px focused input risked Safari zoom; transient menu opener could not receive restored focus	High	Shared 16px compact editable marker; stable Options fallback; Escape and focus restoration verified in browser and DOM tests
Review tree/search and shared filters	390×844, 430×932	13px search fields and undersized clear actions	High	16px compact text, 44px compact controls; typed/cleared long queries in light and dark themes; desktop stays 13px
Passive searchable pickers	390×844, 768×1024, 1440×900	Opening model/agent/branch/worktree/skill selectors could immediately focus search and raise a touch keyboard	Medium	Primary coarse pointers retain trigger focus; fine pointers still autofocus; both branches covered by DOM tests
Source/edit mode + shared multiline editors	390×844, 430×932	Embedded contenteditable/textarea variants escaped the compact 16px floor	High	Shared editable surface and canonical textarea markers; rendered CodeMirror computed at 16px on compact width, 15px desktop
Code suggestion editor	568×320, 430×932	Transformed ancestry and a 300px textarea put content/footer outside the landscape viewport	Critical	Portaled Base UI dialog, observed visual viewport, vertical compact panes, internal textarea scroll, fixed actions; measured 536×288 inside a 568×320 viewport, 16px text, 80 lines retained, no document overflow
Import/export, image annotation, add-review, code-file/table popouts	320×568 through 768×1024	Layout-viewport sizing, inconsistent safe-area containment, and incomplete keyboard/focus lifecycle	High	Shared visible-viewport shell, bounded cards, single scroll owners, touch targets, Escape/focus restoration; existing image-annotator Escape semantics explicitly preserved
Settings inputs/dialog	390×844 source/entry-point audit	Dense 11–12px controls and the current 85vh architecture need the separate full-screen mobile Settings design	High	Deferred to the already-owned Mobile Settings task; this PR intentionally makes no Settings architecture/UI changes. Owner: Settings mobile redesign. Recommendation: adopt its full-screen visible-viewport shell, then opt fields into the shared editable/touch contracts.

Exact rendered viewport coverage:

• 320×568 — plan Import dialog, long URL, Escape/focus restore, static URL annotation
• 390×844 — plan Import, review tree search, single-file annotation, long values, light/dark themes
• 430×932 — plan source CodeMirror, long code suggestion, live app annotation containment
• 568×320 landscape — suggestion editor open/type/internal-scroll/Escape/focus restoration and matched before/after capture
• 768×1024 — plan source and review controls as an iPad-sized fine-pointer Chromium control
• 1440×900 — fine-pointer desktop control for input density, picker autofocus, horizontal suggestion layout, and popout geometry

The in-app browser reports a fine primary pointer even at phone/tablet dimensions, so coarse-pointer behavior is additionally verified in DOM tests. No claim is made that this is physical iPhone/iPad Safari coverage.

Rendered evidence

Matched dark-theme 568×320 landscape state:

Before: clipped horizontal editor/footer	After: contained vertical editor with internal scroll

390×844 light-theme review search after the shared compact editable/touch-target fix:

Screenshot binaries live only on pr-assets-1385; the implementation branch remains binary-free.

Validation

• DOM_TESTS=1 bun test packages/review-editor/components/SuggestionModal.mobile.test.tsx packages/review-editor/components/ExpandedCommentDialog.mobile.test.tsx packages/ui/components/ImportModal.mobile.test.tsx packages/ui/components/PopoutDialog.mobile.test.tsx packages/ui/components/SearchableSelect.mobile.test.tsx packages/ui/components/ui/mobile-foundation.test.tsx packages/ui/components/MarkdownEditor.extensions.test.tsx packages/ui/hooks/useViewportEnvironment.test.tsx packages/ui/hooks/useModalFocusLifecycle.test.tsx — 27 pass
• bun run typecheck
• bun run build:ui-css
• bun run build:review
• bun run build:hook
• bun run build:opencode
• bun run --cwd apps/guides-show check:budgets
• bun run --cwd apps/guides-show check:manifest
• git diff --check

Self-review found and fixed an Escape collision in image annotation: the shared legacy-modal helper can now restore focus without overriding that surface's existing “blur name, then accept” sequence.

Desktop regression status

At 1440×900, editable sizes, dense control geometry, horizontal code-suggestion layout, and immediate picker autofocus remain intact. Mobile sizing/touch rules stay behind compact width, coarse-pointer, short compact viewport, or the existing compact-touch root contract.

Physical Safari follow-up

• iPhone Safari: confirm focus zoom never occurs and Visual Viewport updates keep fixed actions above the keyboard/home indicator
• rotate while each multiline editor is focused; verify draft, selection, internal scroll, and scroll-to-focused-field behavior
• test attachment/manual-path and model/agent picker repositioning with the software keyboard visible
• iPad Safari: cover software keyboard plus trackpad/hardware-keyboard Escape and focus restoration
• recheck nested portal stacking and browser-chrome collapse in both themes