From 0516606713aea2a843383589c6739b33051e7d9b Mon Sep 17 00:00:00 2001
From: Houria <houriahasbell@gmail.com>
Date: Sun, 21 Dec 2025 14:28:54 +0100
Subject: [PATCH 1/2] fix(ui): Prevent bottom-panel cutoff on short screens

---
 public/game/main.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/public/game/main.html b/public/game/main.html
index e6bc091..66f7022 100644
--- a/public/game/main.html
+++ b/public/game/main.html
@@ -107,7 +107,9 @@
         
         .game-container {
             width: 75%;
-            height: 60vh;
+            /* height: 60vh; */
+            height: auto;
+            flex-grow: 1;
             min-height: 400px;
             border: 4px solid var(--arcade-neon-green);
             background-color: var(--arcade-dark);
@@ -375,9 +377,9 @@
         @media (max-width: 1500px){
             .game-container {
                 width: 75%;
-                height: 50vh;
+                /* height: 50vh; */
                 min-height: 300px;
-                padding-bottom: 60px;
+                /* padding-bottom: 60px; */
             }
 
             .bottom-panel{

From c2cc5c946787fc0c610be33cd91f640fa3d481da Mon Sep 17 00:00:00 2001
From: Houria <houriahasbell@gmail.com>
Date: Thu, 25 Dec 2025 17:49:06 +0100
Subject: [PATCH 2/2] Add bottom margin for 13-15\ screen to fix bottom panel
 overlap

---
 public/game/main.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/public/game/main.html b/public/game/main.html
index 66f7022..8064dd5 100644
--- a/public/game/main.html
+++ b/public/game/main.html
@@ -107,9 +107,7 @@
         
         .game-container {
             width: 75%;
-            /* height: 60vh; */
-            height: auto;
-            flex-grow: 1;
+            height: 60vh;
             min-height: 400px;
             border: 4px solid var(--arcade-neon-green);
             background-color: var(--arcade-dark);
@@ -142,7 +140,7 @@
             display: flex;
             gap: 1.5rem;
             justify-content: space-between;
-            margin-bottom: 5px;
+            margin-bottom: 1rem;
         }
         
         .camera-box, .score-box {
@@ -377,13 +375,14 @@
         @media (max-width: 1500px){
             .game-container {
                 width: 75%;
-                /* height: 50vh; */
+                height: 50vh;
                 min-height: 300px;
-                /* padding-bottom: 60px; */
+                padding-bottom: 60px;
             }
 
             .bottom-panel{
                 width: 75%;
+                margin-bottom: 5rem;
             }
             
             .camera-box {