From 18d66c2dbaf76d65221ea58aea057d9045ac4a4c Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Fri, 20 Mar 2026 23:06:45 -0400
Subject: [PATCH] fix: meter gradient now scales correctly across resolutions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header element was width:100% so the gradient filled relative to
the viewport, not the visible text. With centered text, low fill
percentages fell entirely outside the text bounds — making the first
player (12.5%) invisible and causing shifts at different resolutions.
Changed to width:fit-content with translateX(-50%) centering so the
gradient maps 1:1 to the text content.

Made-with: Cursor
---
 js/room-code-display.js | 2 +-
 optimized-controls.html | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/room-code-display.js b/js/room-code-display.js
index 3153a7f..556391b 100644
--- a/js/room-code-display.js
+++ b/js/room-code-display.js
@@ -211,7 +211,7 @@ class RoomCodeDisplay {
     header.textContent = inputs.headerText.value;
     this.#applyMeterGradient();
     header.style.fontSize = `${inputs.headerSize.value}px`;
-    header.style.transform = `translateY(${inputs.headerOffset.value}px)`;
+    header.style.transform = `translateX(-50%) translateY(${inputs.headerOffset.value}px)`;
 
     footer.textContent = inputs.footerText.value;
     footer.style.color = inputs.footerColor.value;
diff --git a/optimized-controls.html b/optimized-controls.html
index 38e8468..8395ed5 100644
--- a/optimized-controls.html
+++ b/optimized-controls.html
@@ -29,9 +29,9 @@
         
         #header {
             position: absolute;
-            width: 100%;
-            text-align: center;
-            transform: translateY(-220px);
+            width: fit-content;
+            left: 50%;
+            transform: translateX(-50%) translateY(-220px);
             color: #f35dcb;
             font-size: 80px;
             font-weight: bold;