From 519d08a2a66c51f4d85d9598bff695f9a483516c Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 22 Feb 2026 20:32:32 -0500
Subject: [PATCH] Fix layout: move rules drawer out of game-layout, restore
 bottom bar padding

Reverts flush-edge pill styling and restores horizontal padding to prevent
clipping. Rules drawer is now a sibling of bottom-bar, not inside game-layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/index.html | 11 ++++++-----
 client/style.css  | 14 +++++---------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/client/index.html b/client/index.html
index 0e2502a..a310e66 100644
--- a/client/index.html
+++ b/client/index.html
@@ -405,11 +405,6 @@
                     </table>
                 </div>
 
-                <!-- Mobile rules drawer -->
-                <div id="rules-drawer" class="side-panel rules-drawer-panel">
-                    <h4>Active Rules</h4>
-                    <div id="mobile-rules-content"></div>
-                </div>
             </div>
 
             <!-- Mobile bottom bar (hidden on desktop) -->
@@ -420,6 +415,12 @@
                 <button id="mobile-leave-btn" class="mobile-bar-btn mobile-leave-btn">End Game</button>
             </div>
 
+            <!-- Mobile rules drawer -->
+            <div id="rules-drawer" class="side-panel rules-drawer-panel">
+                <h4>Active Rules</h4>
+                <div id="mobile-rules-content"></div>
+            </div>
+
             <!-- Drawer backdrop for mobile -->
             <div id="drawer-backdrop" class="drawer-backdrop"></div>
         </div>
diff --git a/client/style.css b/client/style.css
index 965ab8e..d3410a6 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5406,12 +5406,12 @@ body.mobile-portrait #mobile-bottom-bar {
     gap: 8px;
     background: none;
     flex-shrink: 0;
-    padding: 6px 0;
+    padding: 6px 8px;
     padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
     z-index: 900;
 }
 
-/* Hole indicator — flush left */
+/* Hole indicator — pinned left */
 body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
     margin-right: auto;
     color: rgba(255, 255, 255, 0.9);
@@ -5421,19 +5421,15 @@ body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
     letter-spacing: 0.03em;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.15);
-    border-left: none;
-    border-radius: 0 20px 20px 0;
-    padding: 4px 9px 4px 12px;
+    border-radius: 20px;
+    padding: 4px 9px;
 }
 
-/* End Game — flush right */
+/* End Game — pinned right */
 body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn {
     margin-left: auto;
     background: rgba(180, 60, 60, 0.3) !important;
     border-color: rgba(220, 80, 80, 0.4) !important;
-    border-right: none !important;
-    border-radius: 20px 0 0 20px !important;
-    padding-right: 12px !important;
     color: rgba(255, 120, 120, 0.9) !important;
 }