breakglass UI: mobile-first rework (chat input was hidden on phones)
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Mobile is the primary client for fixing the devvm, but the first cut was
desktop-first and the chat input was unreachable on a phone:
- Root cause: the shell used height:100%/100vh, so on mobile browsers the
composer at the bottom sat behind the address/tool bar — you saw the VM
buttons but no place to type. Switched #app to 100dvh (dynamic viewport
height) with a 100vh fallback; body no longer scrolls (chat scrolls
internally), killing iOS rubber-banding.
- Layout is now mobile-first single-column: the chat fills the screen with
the composer pinned at the bottom and always visible. The VM power controls
moved into a slide-up bottom sheet behind a compact "⚡ VM" header button
(backdrop + close + grab handle). At ≥900px the sheet becomes a static side
column again and the toggle is hidden — desktop unchanged.
- Touch targets ≥40px; composer textarea bumped to 16px so iOS Safari doesn't
auto-zoom on focus (which itself shoved the composer out of view).
Verified at 390×844 (iPhone) and 1280×800 via Playwright: input box renders at
y=723–821 (inside the 844 viewport), sheet slides in on tap, desktop keeps the
2-column side panel.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
4f361d91eb
commit
aa054cac3f
7 changed files with 194 additions and 95 deletions
|
|
@ -443,14 +443,16 @@
|
|||
flex: 1;
|
||||
resize: none;
|
||||
max-height: 168px;
|
||||
min-height: 44px;
|
||||
min-height: 48px;
|
||||
background: var(--bg-2);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 11px 13px;
|
||||
padding: 12px 13px;
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
/* 16px: anything smaller makes iOS Safari auto-zoom on focus (mobile is the
|
||||
primary client) — the zoom then shifts the composer out of view. */
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue