From 9b04bc85c295b8b6e3618921ae7f5cb9229a1140 Mon Sep 17 00:00:00 2001 From: adlee-was-taken Date: Sun, 22 Feb 2026 13:06:11 -0500 Subject: [PATCH] Fix mobile bottom bar pinning by scaling elements individually 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 --- client/style.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/client/style.css b/client/style.css index f8957eb..1fb87d1 100644 --- a/client/style.css +++ b/client/style.css @@ -5282,22 +5282,20 @@ body.mobile-portrait #mobile-bottom-bar { padding: 6px 12px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 900; - transform: scale(0.75); - transform-origin: bottom center; } /* Hole indicator — pinned left with pill background */ body.mobile-portrait #mobile-bottom-bar .mobile-round-info { margin-right: auto; color: rgba(255, 255, 255, 0.9); - font-size: 0.7rem; + font-size: 0.55rem; font-weight: 700; white-space: nowrap; letter-spacing: 0.03em; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; - padding: 5px 12px; + padding: 4px 9px; } /* End Game — pinned right */ @@ -5316,9 +5314,9 @@ body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); - font-size: 0.65rem; + font-size: 0.5rem; font-weight: 600; - padding: 6px 14px; + padding: 5px 10px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em;