alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Chrome Android player hand overlapping bottom bar

Browse Source 
Add 100vh fallback before 100dvh, max-height constraints on every flex
container in the layout chain, and explicit flex-basis 0% to prevent
Chrome from letting flex children grow beyond viewport bounds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 14:22:07 -05:00
parent 889f8ce1cd
commit 1c5d6b09e2
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/style.css
View File

@ -4906,6 +4906,7 @@ body.screen-shake {
} }
body.mobile-portrait { body.mobile-portrait {
height: 100vh;
height: 100dvh; height: 100dvh;
overflow: hidden; overflow: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
@ -4914,14 +4915,20 @@ body.mobile-portrait {
body.mobile-portrait #app { body.mobile-portrait #app {
padding: 0; padding: 0;
height: 100vh;
height: 100dvh; height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden; overflow: hidden;
} }
/* --- Mobile: Game screen fills viewport --- */ /* --- Mobile: Game screen fills viewport --- */
/* IMPORTANT: Must include .active to avoid overriding .screen { display: none } */ /* IMPORTANT: Must include .active to avoid overriding .screen { display: none } */
body.mobile-portrait #game-screen.active { body.mobile-portrait #game-screen.active {
height: 100vh;
height: 100dvh; height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden; overflow: hidden;
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
@ -4930,10 +4937,11 @@ body.mobile-portrait #game-screen.active {
} }
body.mobile-portrait .game-layout { body.mobile-portrait .game-layout {
flex: 1; flex: 1 1 0%;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
max-height: 100%;
} }
body.mobile-portrait .game-main { body.mobile-portrait .game-main {
@ -5019,10 +5027,11 @@ body.mobile-portrait .game-table {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 0 !important; gap: 0 !important;
flex: 1; flex: 1 1 0%;
overflow: hidden; overflow: hidden;
padding: 0 4px 36px; padding: 0 4px 36px;
min-height: 0; min-height: 0;
max-height: 100%;
} }
/* --- Mobile: Opponents wrap at 3 per row (max 5 opponents = 3+2) --- */ /* --- Mobile: Opponents wrap at 3 per row (max 5 opponents = 3+2) --- */
@ -5046,8 +5055,9 @@ body.mobile-portrait .player-row {
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
width: 100%; width: 100%;
flex: 1; flex: 1 1 0%;
min-height: 0; min-height: 0;
max-height: 100%;
overflow: hidden; overflow: hidden;
} }