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

Make mobile bottom bar flow in document instead of position fixed

Browse Source 
Remove position:fixed from the bottom bar and make it a flex-shrink:0
child of the game screen flex column. This guarantees the game layout
gets exactly the remaining viewport height with no overlap, regardless
of how the browser calculates viewport units.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 14:35:09 -05:00
parent 7dc27fe882
commit 8942238f9c
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/style.css
View File

@ -4939,11 +4939,12 @@ body.mobile-portrait .game-layout {
} }
body.mobile-portrait .game-main { body.mobile-portrait .game-main {
flex: 1; flex: 1 1 0%;
gap: 0; gap: 0;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
max-height: 100%;
} }
/* --- Mobile: Compact header (single row) --- */ /* --- Mobile: Compact header (single row) --- */
@ -5023,7 +5024,7 @@ body.mobile-portrait .game-table {
gap: 0 !important; gap: 0 !important;
flex: 1 1 0%; flex: 1 1 0%;
overflow: hidden; overflow: hidden;
padding: 0 4px 36px; padding: 0 4px;
min-height: 0; min-height: 0;
max-height: 100%; max-height: 100%;
} }
@ -5293,10 +5294,7 @@ body.mobile-portrait #mobile-bottom-bar {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: none; background: none;
position: fixed; flex-shrink: 0;
bottom: 0;
left: 0;
right: 0;
padding: 6px 12px; padding: 6px 12px;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
z-index: 900; z-index: 900;