alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap opponent row at 3 per line and bump opponent card size 10%

Browse Source 
- Change opponents-row from nowrap to flex-wrap: wrap (max 3+2 layout)
- Opponent cards: 32x45px -> 35x49px, font 0.6 -> 0.65rem
- Short screen: 26x36px -> 29x40px, font 0.45 -> 0.5rem
- 3 opponents at 35px fits 369px, well within 375px iPhone width

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-21 23:16:40 -05:00
parent b7b21d8378
commit 3227c92d63
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/style.css
View File

@ -5009,18 +5009,16 @@ body.mobile-portrait .game-table {
min-height: 0; min-height: 0;
} }
/* --- Mobile: Opponents as flat horizontal strip, pinned to top --- */ /* --- Mobile: Opponents wrap at 3 per row (max 5 opponents = 3+2) --- */
body.mobile-portrait .opponents-row { body.mobile-portrait .opponents-row {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
gap: 6px; gap: 4px 6px;
min-height: 0 !important; min-height: 0 !important;
padding: 2px 8px 6px; padding: 2px 8px 6px;
overflow-x: auto; overflow: hidden;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
flex-shrink: 0; flex-shrink: 0;
} }
@ -5064,20 +5062,20 @@ body.mobile-portrait .opponent-area h4 {
font-size: 0.6rem; font-size: 0.6rem;
margin: 0 0 2px 0; margin: 0 0 2px 0;
padding: 2px 4px; padding: 2px 4px;
max-width: 110px; max-width: 120px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
body.mobile-portrait .opponent-area .card-grid { body.mobile-portrait .opponent-area .card-grid {
grid-template-columns: repeat(3, 32px) !important; grid-template-columns: repeat(3, 35px) !important;
gap: 2px !important; gap: 2px !important;
} }
body.mobile-portrait .opponent-area .card { body.mobile-portrait .opponent-area .card {
width: 32px !important; width: 35px !important;
height: 45px !important; height: 49px !important;
font-size: 0.6rem !important; font-size: 0.65rem !important;
border-radius: 3px; border-radius: 3px;
} }
@ -5312,14 +5310,14 @@ body.mobile-portrait #waiting-screen {
} }
body.mobile-portrait .opponent-area .card-grid { body.mobile-portrait .opponent-area .card-grid {
grid-template-columns: repeat(3, 26px) !important; grid-template-columns: repeat(3, 29px) !important;
gap: 1px !important; gap: 1px !important;
} }
body.mobile-portrait .opponent-area .card { body.mobile-portrait .opponent-area .card {
width: 26px !important; width: 29px !important;
height: 36px !important; height: 40px !important;
font-size: 0.45rem !important; font-size: 0.5rem !important;
} }
body.mobile-portrait .table-center { body.mobile-portrait .table-center {