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.
- API-key gate is now a fixed, out-of-flow overlay (inset-0, overflow
hidden, overscroll-none) with its own internal scroller, so the document
has no scrollable height on phones. It can't be panned or bounced.
- Home/create mains are flex columns with min-h-dvh and a flex-1 content
area, and the empty state's mobile padding was trimmed, so a short/empty
library is exactly viewport height instead of overflowing by ~76px.
Long pages (the create form, decks) still scroll normally.
- html/body get overscroll-behavior: none to stop pull-to-refresh and
rubber-banding on fitting screens.
Verified with a scroll probe (gate and empty library: scrollHeight ==
viewport; create still scrolls) plus zoom 6/6, install sheet 64/64,
pwa 16/16, final-ux 12/12, retry 14/14, security 8/8, contrast 20/20.
- Disabled Continue is now the primary style at 45% opacity with
cursor: not-allowed; full opacity while validating and once text is
entered.
- Move "How do I get a key?" below the Continue button (small ? icon,
muted, underline on hover) and tighten input+button spacing.
- Shorten the subtitle to "One step to freeze your first deck." and
balance it.
- Replace the faint gradient with two real blurred blobs (top-right and
bottom-left, 120px blur, pointer-events: none, behind the card).
- Dark: page #0f0f0f, card #1a1a1a, 8% white border.
- Phone: 24px heading, 15px subtitle, wider card padding, 40px corner
buttons with safe-area-aware offsets, robust 100dvh centering.
- Modal: 480px wide with text-pretty steps, stronger tinted free-tier
callout, handle removed from the phone sheet.
- Tests: gate suite now 49 checks incl. disabled opacity, glow pseudo,
card separation and help-link placement; new state screenshots for
invalid/offline/validating in both themes.
- Add a theme toggle to the gate (sun/moon ghost button next to the help
button); it switches instantly and persists to localStorage.
- Strengthen the corner glows so the stage reads atmospheric in both themes
(bigger, slightly stronger radial gradients behind the card).
- Center the logo, heading, subtitle and footnote inside the card.
- Dark mode: replace the solid white logo tile with a subtle raised tile
(thin border, light snowflake); make the card only slightly lighter than
the near-black page with a low-opacity border and soft shadow.
- Disabled Continue keeps the primary fill at ~45% opacity with a crisp
label instead of a faded muddy one; fully solid once text is entered.
- Bigger 36px corner buttons and a visible "How do I get a key?" text link
under the input that opens the same modal.
- Shorten and balance the reassurance line.
- Help modal: step circles aligned to the first text line, emphasised
free-tier callout with a check icon, underlined links with an
external-link icon, muted medium-weight UI labels, 36px close button
aligned to the title.
- Gate test extended to 44 checks (theme toggle, text link, modal polish).
In user-key mode a browser with no stored Ollama key now gets a polished
gate instead of the app shell: one masked input with a show/hide toggle,
a single Continue button, inline validation errors, and a "?" help sheet
with the steps to a free key.
- Validates the draft key through /api/health (real 1-token probe) before
saving; invalid-key and network failures read differently.
- Key still lives only in this browser's localStorage; nothing server-side.
- Gate wraps /, /create and deck study; server-key and local-daemon modes
skip it; removing the key in Settings brings it back.
- Removes the now-redundant dashboard/create API-key banner.
- Monochrome corner glows (dark near-black / light near-white), 24px card,
48px field and button, gentle fade/slide-in, reduced-motion aware.
- Help modal: centred dialog on desktop, bottom sheet on mobile, closes via
X, Escape or backdrop.
- README and browser suites updated (34 gate checks, 15 key-flow checks,
12 shipped-default checks; ui/folders/docs/pwa/security/contrast green).
