From 26778e4b02db39f406a16ac4683b2b4b1cf695d3 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Tue, 24 Feb 2026 00:22:34 -0500
Subject: [PATCH] Fix lobby header: use inline-grid for logo/title layout

The 749px media query was triggering at mid-range widths, collapsing
the two-row logo+title into a single line. Fix by:
- Using inline-grid on h1 for bulletproof two-row layout
- Lowering single-line breakpoint from 749px to 500px
- Widening lobby container to 550px for title to fit naturally
- Constraining game controls to 400px max-width

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/style.css | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/style.css b/client/style.css
index 27799b5..5df65a6 100644
--- a/client/style.css
+++ b/client/style.css
@@ -42,7 +42,7 @@ body {
 
 /* Lobby Screen */
 #lobby-screen {
-    max-width: 400px;
+    max-width: 550px;
     margin: 0 auto;
     padding: 20px;
     text-align: center;
@@ -59,6 +59,7 @@ body {
 
 /* Golf title - golf ball with dimples and shine */
 .golf-title {
+    display: block;
     font-size: 1.05em;
     font-weight: 800;
     letter-spacing: 0.02em;
@@ -102,19 +103,27 @@ body {
 }
 
 #lobby-screen h1 {
-    width: fit-content;
-    margin: 0 auto;
+    display: inline-grid;
+    grid-template-columns: auto;
+    justify-items: start;
     text-align: left;
+    row-gap: 2px;
 }
 
 .logo-row {
-    display: block;
-    margin-bottom: -0.3em;
+    margin-bottom: 0;
 }
 
-@media (max-width: 749px) {
+#lobby-game-controls,
+#auth-prompt {
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (max-width: 500px) {
     #lobby-screen h1 {
-        width: auto;
+        display: block;
         text-align: center;
         text-indent: -18px;
     }
@@ -122,6 +131,9 @@ body {
         display: inline;
         margin-bottom: 0;
     }
+    .golf-title {
+        display: inline;
+    }
 }
 
 /* Golfer swing animation */