From 6ba0639d515d83f2cc815cea1a27431dd85ce7cc Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 21 Feb 2026 23:23:19 -0500
Subject: [PATCH] Fix opponent row fitting 3 per row on mobile

- Remove excessive 44px bottom padding on game-table (was eating vertical space)
- Tighten opponents-row: reduce gap 6px->4px, side padding 8px->4px
- Reduce opponent-area side padding 5px->4px
- Allow opponent areas to shrink (remove flex-shrink: 0)
- 3 opponents now fit in ~367px, well within 412px Pixel 10 Pro

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/style.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/style.css b/client/style.css
index 16751f4..f692c34 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5006,7 +5006,6 @@ body.mobile-portrait .game-table {
     flex: 1;
     overflow: hidden;
     padding: 0 4px;
-    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
     min-height: 0;
 }
 
@@ -5016,9 +5015,9 @@ body.mobile-portrait .opponents-row {
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
-    gap: 4px 6px;
+    gap: 4px;
     min-height: 0 !important;
-    padding: 2px 8px 6px;
+    padding: 2px 4px 6px;
     overflow: hidden;
     flex-shrink: 0;
 }
@@ -5039,11 +5038,10 @@ body.mobile-portrait .player-row {
 body.mobile-portrait .opponents-row .opponent-area {
     margin-bottom: 0 !important;
     transform: none !important;
-    flex-shrink: 0;
 }
 
 body.mobile-portrait .opponent-area {
-    padding: 3px 5px 4px;
+    padding: 3px 4px 4px;
     border-radius: 6px;
     min-width: 0;
     position: relative;