From f8435a2fae053df769a89870fe3da6b34521f359 Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Thu, 15 Jan 2026 14:59:03 -0600
Subject: [PATCH] CLAUDE: UI fixes - lineup builder layout and team order

- Lineup builder: Use layout: false to remove white border/padding
- Create game: Swap team order so Away Team appears above Home Team

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend-sba/pages/games/create.vue      | 52 ++++++++++++------------
 frontend-sba/pages/games/lineup/[id].vue |  3 ++
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend-sba/pages/games/create.vue b/frontend-sba/pages/games/create.vue
index 1b63cbc..5dec483 100755
--- a/frontend-sba/pages/games/create.vue
+++ b/frontend-sba/pages/games/create.vue
@@ -24,31 +24,6 @@
         >
       </div>
 
-      <!-- Home Team -->
-      <div class="mb-6">
-        <label for="homeTeam" class="block text-sm font-medium text-gray-700 mb-2">
-          Home Team
-        </label>
-        <select
-          id="homeTeam"
-          v-model="formData.homeTeamId"
-          :disabled="isLoadingTeams"
-          required
-          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition disabled:bg-gray-100 disabled:cursor-not-allowed"
-        >
-          <option value="" disabled>
-            {{ isLoadingTeams ? 'Loading teams...' : 'Select home team' }}
-          </option>
-          <option
-            v-for="team in availableTeams"
-            :key="team.id"
-            :value="team.id"
-          >
-            {{ team.lname }} ({{ team.abbrev }})
-          </option>
-        </select>
-      </div>
-
       <!-- Away Team -->
       <div class="mb-6">
         <label for="awayTeam" class="block text-sm font-medium text-gray-700 mb-2">
@@ -68,7 +43,32 @@
             v-for="team in availableTeams"
             :key="team.id"
             :value="team.id"
-            :disabled="team.id === formData.homeTeamId"
+          >
+            {{ team.lname }} ({{ team.abbrev }})
+          </option>
+        </select>
+      </div>
+
+      <!-- Home Team -->
+      <div class="mb-6">
+        <label for="homeTeam" class="block text-sm font-medium text-gray-700 mb-2">
+          Home Team
+        </label>
+        <select
+          id="homeTeam"
+          v-model="formData.homeTeamId"
+          :disabled="isLoadingTeams"
+          required
+          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition disabled:bg-gray-100 disabled:cursor-not-allowed"
+        >
+          <option value="" disabled>
+            {{ isLoadingTeams ? 'Loading teams...' : 'Select home team' }}
+          </option>
+          <option
+            v-for="team in availableTeams"
+            :key="team.id"
+            :value="team.id"
+            :disabled="team.id === formData.awayTeamId"
           >
             {{ team.lname }} ({{ team.abbrev }})
           </option>
diff --git a/frontend-sba/pages/games/lineup/[id].vue b/frontend-sba/pages/games/lineup/[id].vue
index c1ab099..d358e16 100644
--- a/frontend-sba/pages/games/lineup/[id].vue
+++ b/frontend-sba/pages/games/lineup/[id].vue
@@ -4,6 +4,9 @@ import { useRoute, useRouter } from 'vue-router'
 import type { SbaPlayer, LineupPlayerRequest, SubmitLineupsRequest } from '~/types'
 import ActionButton from '~/components/UI/ActionButton.vue'
 
+// Use no layout - this page has its own complete UI
+definePageMeta({ layout: false })
+
 const route = useRoute()
 const router = useRouter()
 const config = useRuntimeConfig()