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;
}
/* --- 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 {
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 6px;
gap: 4px 6px;
min-height: 0 !important;
padding: 2px 8px 6px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overflow: hidden;
flex-shrink: 0;
}
@ -5064,20 +5062,20 @@ body.mobile-portrait .opponent-area h4 {
font-size: 0.6rem;
margin: 0 0 2px 0;
padding: 2px 4px;
max-width: 110px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
body.mobile-portrait .opponent-area .card-grid {
grid-template-columns: repeat(3, 32px) !important;
grid-template-columns: repeat(3, 35px) !important;
gap: 2px !important;
}
body.mobile-portrait .opponent-area .card {
width: 32px !important;
height: 45px !important;
font-size: 0.6rem !important;
width: 35px !important;
height: 49px !important;
font-size: 0.65rem !important;
border-radius: 3px;
}
@ -5312,14 +5310,14 @@ body.mobile-portrait #waiting-screen {
}
body.mobile-portrait .opponent-area .card-grid {
grid-template-columns: repeat(3, 26px) !important;
grid-template-columns: repeat(3, 29px) !important;
gap: 1px !important;
}
body.mobile-portrait .opponent-area .card {
width: 26px !important;
height: 36px !important;
font-size: 0.45rem !important;
width: 29px !important;
height: 40px !important;
font-size: 0.5rem !important;
}
body.mobile-portrait .table-center {