fix(ui): allow scrolling on start and lobby screens for small viewports

The app container had a fixed height: 100dvh with overflow: hidden, which
is correct for the game layout but cut off the start screen on small
viewports (mobile phones) — map cards, difficulty selection, and the help
section were unreachable with no way to scroll.

Changes:
- App.vue: add a "scrollable" class (overflow-y: auto) to the app container
  when the screen is "menu" or "lobby"; the in-game layout keeps the fixed
  locked viewport
- LobbyScreen.vue: change .lobby height: 100dvh to min-height: 100dvh so a
  tall lobby card grows instead of being clipped by flex centering on small
  screens

Verified in a real browser at 390x700 (mobile viewport): the menu content
overflows (2261px vs 700px viewport), .app reports overflow-y: auto and is
scrollable, and after a simulated swipe the help section at the bottom
becomes visible (scrollTop 900 of max 1561).
This commit is contained in:
Tronax 2026-08-16 18:30:10 +02:00
parent cf63f27839
commit 4c14425a6d
Signed by: Tronax
SSH key fingerprint: SHA256:2pKKXDZucWvaF/GzXNz0FY53EAO1YDLN80bqS+TTz/o
2 changed files with 7 additions and 2 deletions

View file

@ -37,7 +37,7 @@ const badgeColor = computed(() => {
</script> </script>
<template> <template>
<div class="app"> <div class="app" :class="{ scrollable: store.screen === 'menu' || store.screen === 'lobby' }">
<StartScreen v-if="store.screen === 'menu'" /> <StartScreen v-if="store.screen === 'menu'" />
<LobbyScreen v-else-if="store.screen === 'lobby'" /> <LobbyScreen v-else-if="store.screen === 'lobby'" />
<div v-else class="game-layout"> <div v-else class="game-layout">
@ -73,6 +73,11 @@ const badgeColor = computed(() => {
height: 100dvh; height: 100dvh;
overflow: hidden; overflow: hidden;
} }
/* Menu & lobby content may exceed the viewport on small screens (mobile):
allow vertical scrolling there, keep the fixed game layout locked. */
.app.scrollable {
overflow-y: auto;
}
.game-layout { .game-layout {
height: 100dvh; height: 100dvh;
padding: 10px 12px 12px; padding: 10px 12px 12px;

View file

@ -95,7 +95,7 @@ function pickMap(mId: MapId): void {
<style scoped> <style scoped>
.lobby { .lobby {
height: 100dvh; min-height: 100dvh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;