fix(ui): iOS soft-keyboard shell alignment + hotseat relock on return
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 1m6s
CI / conformance (pull_request) Successful in 10s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m43s

iOS Safari/WKWebView does not shrink the layout viewport for the soft
keyboard (Android Chrome does): the visual viewport shrinks AND offsets
down toward the focused field, and the values do not cleanly revert. The
pinned shell tracked only the height (--vvh), not the offset, so its
top-anchored content misaligned on iOS — empty space below the form,
worst on a repeat focus. Fix (one place; covers NewGame, Chat, Feedback):
- app.svelte.ts syncViewport: also mirror visualViewport.offsetTop into
  --vv-top, and scroll the focused field into view on the keyboard-open
  transition (iOS does not reliably scroll a pinned document to it).
- app.css: the pinned app-shell body follows top=--vv-top + height=--vvh
  (was inset:0), so it stays on the visible area.
- e2e/viewport.spec.ts emulates the visual-viewport resize+offset (a fake
  window.visualViewport) to verify the shell follows, on Chromium+WebKit.

Hotseat: returning to the lobby now re-locks the current seat (its PIN is
re-prompted) — LocalSource.relock, cleared in Game.svelte onDestroy.
Root-caused a crash it exposed: a $props() value (id) reads back undefined
during Svelte teardown, so isLocalGameId(id) threw and aborted onDestroy
(breaking navigation) — read the id from the loaded view instead.
This commit is contained in:
Ilia Denisov
2026-07-07 14:10:57 +02:00
parent c1ac77bc6a
commit beda6ccd3d
7 changed files with 140 additions and 13 deletions
+9 -1
View File
@@ -162,7 +162,15 @@ html.app-shell {
}
html.app-shell body {
position: fixed;
inset: 0;
/* Follow the visual viewport (top + height), not merely fill the layout viewport: iOS Safari /
WKWebView does not shrink the layout viewport for the soft keyboard — it offsets the visual
viewport down toward the focused field — so a top-anchored (inset:0) shell would misalign, showing
empty space below the content (worst on a repeat focus). --vv-top / --vvh are kept in sync from
app.svelte.ts (syncViewport). The fallbacks equal inset:0 before the first sync / on the landing. */
top: var(--vv-top, 0px);
left: 0;
right: 0;
height: var(--vvh, 100%);
overflow: hidden;
}