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

Fix layout: move rules drawer out of game-layout, restore bottom bar padding

Browse Source 
Reverts flush-edge pill styling and restores horizontal padding to prevent
clipping. Rules drawer is now a sibling of bottom-bar, not inside game-layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 20:32:32 -05:00
parent 9419cb562e
commit 519d08a2a6
2 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/index.html
View File

@ -405,11 +405,6 @@
</table>
</div>
<!-- Mobile rules drawer -->
<div id="rules-drawer" class="side-panel rules-drawer-panel">
<h4>Active Rules</h4>
<div id="mobile-rules-content"></div>
</div>
</div>
<!-- Mobile bottom bar (hidden on desktop) -->
@ -420,6 +415,12 @@
<button id="mobile-leave-btn" class="mobile-bar-btn mobile-leave-btn">End Game</button>
</div>
<!-- Mobile rules drawer -->
<div id="rules-drawer" class="side-panel rules-drawer-panel">
<h4>Active Rules</h4>
<div id="mobile-rules-content"></div>
</div>
<!-- Drawer backdrop for mobile -->
<div id="drawer-backdrop" class="drawer-backdrop"></div>
</div>

14
client/style.css
View File

@ -5406,12 +5406,12 @@ body.mobile-portrait #mobile-bottom-bar {
gap: 8px;
background: none;
flex-shrink: 0;
padding: 6px 0;
padding: 6px 8px;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
z-index: 900;
}
/* Hole indicator — flush left */
/* Hole indicator — pinned left */
body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
margin-right: auto;
color: rgba(255, 255, 255, 0.9);
@ -5421,19 +5421,15 @@ body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
letter-spacing: 0.03em;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-left: none;
border-radius: 0 20px 20px 0;
padding: 4px 9px 4px 12px;
border-radius: 20px;
padding: 4px 9px;
}
/* End Game — flush right */
/* End Game — pinned right */
body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn {
margin-left: auto;
background: rgba(180, 60, 60, 0.3) !important;
border-color: rgba(220, 80, 80, 0.4) !important;
border-right: none !important;
border-radius: 20px 0 0 20px !important;
padding-right: 12px !important;
color: rgba(255, 120, 120, 0.9) !important;
}