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

Fix layout: restore 12px padding, use negative margins for flush edges

Browse Source 
Zero padding was breaking game layout. Keep 12px padding for layout
stability and use margin-left: -12px / margin-right: -12px on the
edge items to push them flush against screen edges.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 20:36:18 -05:00
parent 9f75cdb0dc
commit 02f9b3c44d
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/style.css
View File

@ -5406,7 +5406,7 @@ body.mobile-portrait #mobile-bottom-bar {
gap: 8px; gap: 8px;
background: none; background: none;
flex-shrink: 0; flex-shrink: 0;
padding: 6px 0; 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;
} }
@ -5414,6 +5414,7 @@ body.mobile-portrait #mobile-bottom-bar {
/* Hole indicator — flush left edge */ /* Hole indicator — flush left edge */
body.mobile-portrait #mobile-bottom-bar .mobile-round-info { body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
margin-right: auto; margin-right: auto;
margin-left: -12px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-size: 0.77rem; font-size: 0.77rem;
font-weight: 700; font-weight: 700;
@ -5423,17 +5424,18 @@ body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
border-left: none; border-left: none;
border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0;
padding: 4px 10px 4px 8px; padding: 4px 10px 4px 12px;
} }
/* End Game — flush right edge */ /* End Game — flush right edge */
body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn { body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn {
margin-left: auto; margin-left: auto;
margin-right: -12px;
background: rgba(180, 60, 60, 0.3) !important; background: rgba(180, 60, 60, 0.3) !important;
border-color: rgba(220, 80, 80, 0.4) !important; border-color: rgba(220, 80, 80, 0.4) !important;
border-right: none !important; border-right: none !important;
border-radius: 20px 0 0 20px !important; border-radius: 20px 0 0 20px !important;
padding-right: 8px !important; padding-right: 12px !important;
color: rgba(255, 120, 120, 0.9) !important; color: rgba(255, 120, 120, 0.9) !important;
} }