0822c794ff
## Summary - Improve mobile conversation controls for #800: one-row truncated composer controls, compact touch actions, header overflow for transcript filters and session-change header measurement rebinding. - Hide the timeline below 420px and reduce the worktree selector to its accessible arrow below 460px of conversation width; preserve preferences. - Make the prompt itself follow visible conversation height with a saved manual proportion, 8% minimum / 60% maximum and a 44px floor. Keep drafts and migrate legacy pixel preferences. - Preserve the original six preview templates and add owned native Android/Chromium touch emulation to mobile templates in Electron and Windows Tauri. Allow main windows to shrink to 390px. ## Validation - UI typecheck and build passed. - Focused browser regressions cover narrow mouse/touch layouts, thresholds, filters, draft preservation, pointer/keyboard resizing, proportional window resizing and visual-keyboard changes. - Native Electron emulation and controller/window tests and Tauri controller/restoration tests exercised during implementation; final verification and independent Gatekeeper review will be posted below. ## Scope and limitations - Emulation is Android/Chromium, not a claim of Gecko/Waterfox or Safari parity; iframe fallback changes only dimensions. Physical software keyboard behavior is represented with deterministic visualViewport fixtures. - No shared daemon restart, profile reset or unrelated main-checkout changes. - Existing large files touched: `prompt-input.tsx` (~1068 lines), `instance-shell2.tsx` (~1325), `session-view.tsx` (~697), `browser-frame.tsx` (~877). Refs #800.
3 KiB
Browser preview device emulation
The viewport menu retains its original six fixed templates: responsive, desktop 1440 × 900, tablet 768 × 1024, tablet landscape 1024 × 768, mobile 390 × 844 and mobile landscape 844 × 390 CSS px. There is no separate rotation button or size catalogue. Native mobile templates automatically apply Android / Chromium touch, mobile identity and density settings. Device profiles set CSS viewport, screen orientation, DPR 2.75, touch media and events, Android user agent and mobile client hints. Switching between profiles reloads the preview because applications can cache device detection at startup. Returning to any dimension preset clears all overrides and reloads again.
Electron and Windows Tauri apply overrides to the owned native preview only. The sandboxed iframe fallback changes dimensions only, with a translated tooltip explaining that emulation requires the native app. Neither application privileges nor a general CDP bridge are exposed to preview pages. Tauri's synchronous WebView2 callbacks are awaited off the UI thread. Electron retains its debugger attachment while emulation is active so accessibility automation does not reset overrides.
Canonical profile data lives in packages/ui/src/lib/native/browser-emulation.json.
Native adapters use the installed Chromium version for the simulated user agent.
These generic profiles do not emulate Gecko/Waterfox, Safari, mobile OS text settings,
keyboard occlusion or browser/system bars. They are a reproducible Android/Chromium
layout reference, not a pixel-identical representation of every phone.
The composer keeps selectors and actions on one row at every width, truncating labels rather than wrapping. Dense toolbar/footer touch targets use 32 px; timeline markers use 24 px height. Below 460 CSS px of conversation width, the worktree selector becomes a 32 px arrow-only cell while retaining its accessible label. The timeline is hidden below 420 CSS px of conversation width on every platform, independently of header density, status controls or viewport height. The saved visibility preference is preserved. Header filters join the other actions in the overflow menu when space runs out. Main local and remote desktop windows can shrink to 390 logical pixels and restore at that width. Tests cover 360, 390 and 430 px widths plus 320 px, landscape, mouse/touch media, draft preservation, native profile/reset behavior and the real viewport menu's native/fallback boundaries.
Composer sizing also follows the visible conversation height (including the visual viewport when a software keyboard opens). The minimum is 8% of that height, with a 44 px floor. Width and draft length do not change the limits. Long drafts scroll inside the field. Manual sizing is saved as a proportion of the available height, bounded to 8–60%: the field itself scales when the window or visual viewport changes. The 44 px floor never overwrites that proportion. Legacy pixel heights convert on the first valid measurement. Pointer and keyboard resizing share the same minimum and maximum.