From 4c14425a6d93eb764a628e14825440245f9504b1 Mon Sep 17 00:00:00 2001
From: Tronax <mail@tronax.dev>
Date: Sun, 16 Aug 2026 18:30:10 +0200
Subject: [PATCH] fix(ui): allow scrolling on start and lobby screens for small
 viewports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 src/App.vue                    | 7 ++++++-
 src/components/LobbyScreen.vue | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 133cff9..fbcf918 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,7 +37,7 @@ const badgeColor = computed(() => {
 </script>
 
 <template>
-  <div class="app">
+  <div class="app" :class="{ scrollable: store.screen === 'menu' || store.screen === 'lobby' }">
     <StartScreen v-if="store.screen === 'menu'" />
     <LobbyScreen v-else-if="store.screen === 'lobby'" />
     <div v-else class="game-layout">
@@ -73,6 +73,11 @@ const badgeColor = computed(() => {
   height: 100dvh;
   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 {
   height: 100dvh;
   padding: 10px 12px 12px;
diff --git a/src/components/LobbyScreen.vue b/src/components/LobbyScreen.vue
index f1b0f97..4048fe6 100644
--- a/src/components/LobbyScreen.vue
+++ b/src/components/LobbyScreen.vue
@@ -95,7 +95,7 @@ function pickMap(mId: MapId): void {
 
 <style scoped>
 .lobby {
-  height: 100dvh;
+  min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;