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:
parent
cf63f27839
commit
4c14425a6d
2 changed files with 7 additions and 2 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue