On phones the gate card (447px) is taller than the keyboard-reduced
viewport, so the browser panned the page to reveal the field and the user
could keep scrolling/dragging while typing the API key.
- Pin the gate to the visual viewport (height + offsetTop tracked from
visualViewport resize/scroll), so the browser never needs to pan the
page to reveal the focused field.
- When the keyboard is detected (visual viewport >120px shorter than
innerHeight), lock the card: overflow hidden + touch-action none, and
keep the field and Continue button in view by scrolling the wrapper
programmatically. Re-aligns on resize and when the card grows (error
message / busy state).
- Corner controls are now absolute within the pinned gate so they stay in
the visual viewport.
- Don't auto-focus the field on touch devices (no forced keyboard on
load); desktop still focuses.
Verified by shrinking the viewport to 330px: card locked (wheel/swipe
does nothing), field 182-230 and Continue 242-290 both visible, doc
scrollHeight == viewport; error state keeps Continue at 270-318.
key-gate 49/49, install sheet 64/64, final-ux 12/12, zoom 6/6.
Martin Dvorak
190664c1a5