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

Fix mobile bottom bar pinning by scaling elements individually

Browse Source 
Remove transform: scale(0.75) from the bar container which broke the
full-width layout and margin-auto pinning. Instead shrink font sizes
and padding on individual buttons and round info by ~25%.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 13:06:11 -05:00
parent 2ccbfc8120
commit 9b04bc85c2
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/style.css
View File

@ -5282,22 +5282,20 @@ body.mobile-portrait #mobile-bottom-bar {
padding: 6px 12px; padding: 6px 12px;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
z-index: 900; z-index: 900;
transform: scale(0.75);
transform-origin: bottom center;
} }
/* Hole indicator — pinned left with pill background */ /* Hole indicator — pinned left with pill background */
body.mobile-portrait #mobile-bottom-bar .mobile-round-info { body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
margin-right: auto; margin-right: auto;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-size: 0.7rem; font-size: 0.55rem;
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;
letter-spacing: 0.03em; letter-spacing: 0.03em;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px; border-radius: 20px;
padding: 5px 12px; padding: 4px 9px;
} }
/* End Game — pinned right */ /* End Game — pinned right */
@ -5316,9 +5314,9 @@ body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn {
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-size: 0.65rem; font-size: 0.5rem;
font-weight: 600; font-weight: 600;
padding: 6px 14px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;