diff --git a/ui/frontend/src/lib/game/game-shell.svelte b/ui/frontend/src/lib/game/game-shell.svelte index 5e1da80..5456864 100644 --- a/ui/frontend/src/lib/game/game-shell.svelte +++ b/ui/frontend/src/lib/game/game-shell.svelte @@ -671,6 +671,22 @@ return to the lobby still disposes the stores via `onDestroy`. overflow-y: auto; } @media (max-width: 767.98px) { + /* + Pin the shell to the viewport on mobile and take it out of + document flow. With `min-height: 100vh` the shell can overflow + the viewport by a few sub-pixels, which makes the document + scrollable; scrolling then toggles the mobile browser's dynamic + toolbar, resizing the viewport and the `position: fixed` overlays + (map-toggles menu, bottom-tab drawer, planet sheet) mid-gesture. + `position: fixed; inset: 0` keeps the viewport — and those + overlays — stable, leaving the active-view area as the single + internal scroll region. + */ + .game-shell { + position: fixed; + inset: 0; + min-height: 0; + } .body { padding-bottom: 3.25rem; }