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>
This commit is contained in:
adlee-was-taken 2026-02-21 23:23:19 -05:00
parent 3b9522fec3
commit 6ba0639d51

View File

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