From 8942238f9c597aabf0f18f99caf7189872ea9ad4 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 14:35:09 -0500
Subject: [PATCH] Make mobile bottom bar flow in document instead of position
 fixed

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>
---
 client/style.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

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