From 240d0181b1b6b7e07ee987ca871821abc0d2065d Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Thu, 27 Nov 2025 22:19:38 -0600
Subject: [PATCH] CLAUDE: Move mobile Runners/Outs beside Inning indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructured mobile layout to match desktop:
- Runners+Outs column now beside Inning box in same row
- Layout: Away | [Inning][Runners/Outs] | Home
- Consistent layout between mobile and desktop views

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend-sba/components/Game/ScoreBoard.vue | 94 ++++++++++-----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/frontend-sba/components/Game/ScoreBoard.vue b/frontend-sba/components/Game/ScoreBoard.vue
index b251103..5c82b2c 100644
--- a/frontend-sba/components/Game/ScoreBoard.vue
+++ b/frontend-sba/components/Game/ScoreBoard.vue
@@ -3,17 +3,18 @@
     <div class="container mx-auto px-3 py-4">
       <!-- Mobile Layout (default) -->
       <div class="lg:hidden">
-        <!-- Score Display - Large and Clear -->
-        <div class="flex items-center justify-between mb-3">
+        <!-- Score Display with Game Situation -->
+        <div class="flex items-center justify-between">
           <!-- Away Team -->
           <div class="flex-1 text-center">
             <div class="text-xs font-medium text-blue-100 mb-1">AWAY</div>
             <div class="text-4xl font-bold tabular-nums">{{ awayScore }}</div>
           </div>
 
-          <!-- Inning Indicator -->
-          <div class="flex-1 text-center px-2">
-            <div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2">
+          <!-- Center: Inning + Runners/Outs -->
+          <div class="flex items-center gap-2">
+            <!-- Inning Indicator -->
+            <div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2 text-center">
               <div class="text-xs font-medium text-blue-100">INNING</div>
               <div class="text-2xl font-bold">{{ inning }}</div>
               <div class="text-xs font-medium">
@@ -25,6 +26,46 @@
                 </span>
               </div>
             </div>
+
+            <!-- Runners + Outs Column -->
+            <div class="flex flex-col gap-0.5 w-20">
+              <!-- Runners (Mini Diamond) -->
+              <div class="bg-white/10 backdrop-blur rounded-lg px-2 py-1">
+                <div class="flex items-center justify-center">
+                  <div class="relative w-11 h-11">
+                    <!-- 2nd Base (Top) -->
+                    <div
+                      class="absolute top-0.5 left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 transition-all"
+                      :class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
+                    />
+
+                    <!-- 1st Base (Right) -->
+                    <div
+                      class="absolute top-[60%] -right-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
+                      :class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
+                    />
+
+                    <!-- 3rd Base (Left) -->
+                    <div
+                      class="absolute top-[60%] -left-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
+                      :class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Outs -->
+              <div class="bg-white/10 backdrop-blur rounded-lg px-2 py-1.5">
+                <div class="flex items-center justify-center gap-1.5">
+                  <div
+                    v-for="i in 3"
+                    :key="i"
+                    class="w-3 h-3 rounded-full transition-all"
+                    :class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
 
           <!-- Home Team -->
@@ -33,49 +74,6 @@
             <div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
           </div>
         </div>
-
-        <!-- Game Situation - Runners + Outs stacked -->
-        <div class="flex items-center justify-center gap-4 text-sm">
-          <!-- Runners + Outs Column -->
-          <div class="flex flex-col gap-0.5 w-24">
-            <!-- Runners (Mini Diamond) - Fixed positioning -->
-            <div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1">
-              <div class="flex items-center justify-center">
-                <div class="relative w-11 h-11">
-                  <!-- 2nd Base (Top) -->
-                  <div
-                    class="absolute top-0.5 left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 transition-all"
-                    :class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
-                  />
-
-                  <!-- 1st Base (Right) -->
-                  <div
-                    class="absolute top-[60%] -right-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
-                    :class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
-                  />
-
-                  <!-- 3rd Base (Left) -->
-                  <div
-                    class="absolute top-[60%] -left-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
-                    :class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- Outs -->
-            <div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1.5">
-              <div class="flex items-center justify-center gap-1.5">
-                <div
-                  v-for="i in 3"
-                  :key="i"
-                  class="w-3 h-3 rounded-full transition-all"
-                  :class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
 
       <!-- Desktop Layout (lg and up) -->