From 5520e0760e36fec839f44ff599c349fea25d38f1 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 7 Mar 2026 21:29:57 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20layout=20=E2=80=94=2030%=20figh?=
 =?UTF-8?q?t=20view=20/=2070%=20battle=20log=20split?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Canvas takes 30% top, battle log + human input takes 70% bottom on mobile
- Battle log now visible on mobile for both live fights and replays (was hidden)
- Compact single-row health bar on mobile to maximize canvas space
- Desktop layout unchanged (62/38 split)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/FightViewer.vue | 16 ++++-----
 frontend/src/pages/FightPage.vue        | 47 +++++++++++--------------
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/FightViewer.vue b/frontend/src/components/FightViewer.vue
index b184f7b..43a0c9a 100644
--- a/frontend/src/components/FightViewer.vue
+++ b/frontend/src/components/FightViewer.vue
@@ -401,12 +401,12 @@ async function replay() {
 <template>
   <div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2">
 
-    <!-- LEFT: Battle Log (hidden on mobile, shown on desktop) -->
-    <div class="hidden lg:flex lg:w-[38%] flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden order-2 lg:order-1">
-      <div class="bg-surface-raised border-b border-border px-3 py-1.5 flex items-center gap-2 flex-shrink-0">
-        <span class="w-2.5 h-2.5 rounded-full bg-ko" />
-        <span class="w-2.5 h-2.5 rounded-full bg-neon-yellow" />
-        <span class="w-2.5 h-2.5 rounded-full bg-neon-green" />
+    <!-- LEFT: Battle Log — mobile: bottom 70%, desktop: left 38% -->
+    <div class="flex h-[70%] lg:h-auto lg:w-[38%] flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden order-2 lg:order-1">
+      <div class="bg-surface-raised border-b border-border px-3 py-1 lg:py-1.5 flex items-center gap-2 flex-shrink-0">
+        <span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-ko" />
+        <span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-yellow" />
+        <span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-green" />
         <span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
       </div>
 
@@ -439,8 +439,8 @@ async function replay() {
       </div>
     </div>
 
-    <!-- RIGHT: Game Canvas -->
-    <div class="flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
+    <!-- RIGHT: Game Canvas — mobile: top 30%, desktop: right 62% -->
+    <div class="h-[30%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
 
       <!-- Health bars — mobile: two-row (names then bars), desktop: single row -->
       <div class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index f20e9c7..27310a7 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -657,16 +657,16 @@ function stopAutoBattle() {
     <!-- LIVE HUMAN FIGHT: full arena view with input -->
     <div v-else-if="isLive && isHumanFight" class="flex-1 flex flex-col lg:flex-row gap-1 sm:gap-2 min-h-0">
 
-      <!-- Battle Log + Human Input — mobile: bottom 40%, desktop: left 38% -->
+      <!-- Battle Log + Human Input — mobile: bottom 70%, desktop: left 38% -->
       <div class="flex flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden
-                  h-[40%] lg:h-auto lg:w-[38%] order-2 lg:order-1">
-        <div class="bg-surface-raised border-b border-border px-3 py-1.5 hidden lg:flex items-center gap-2 flex-shrink-0">
-          <span class="w-2.5 h-2.5 rounded-full bg-ko" />
-          <span class="w-2.5 h-2.5 rounded-full bg-neon-yellow" />
-          <span class="w-2.5 h-2.5 rounded-full bg-neon-green" />
+                  h-[70%] lg:h-auto lg:w-[38%] order-2 lg:order-1">
+        <div class="bg-surface-raised border-b border-border px-3 py-1 lg:py-1.5 flex items-center gap-2 flex-shrink-0">
+          <span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-ko" />
+          <span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-yellow" />
+          <span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-green" />
           <span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
         </div>
-        <div ref="liveLogEl" class="flex-1 overflow-y-auto p-2 sm:p-4 font-mono text-xs sm:text-sm space-y-1.5 leading-relaxed hidden lg:block">
+        <div ref="liveLogEl" class="flex-1 overflow-y-auto p-2 sm:p-4 font-mono text-xs sm:text-sm space-y-1.5 leading-relaxed">
           <div v-for="(item, idx) in liveLogItems" :key="idx">
             <div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
             <p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
@@ -777,32 +777,25 @@ function stopAutoBattle() {
         </div>
       </div>
 
-      <!-- Game Canvas — mobile: top 60%, desktop: right 62% -->
-      <div class="h-[60%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
+      <!-- Game Canvas — mobile: top 30%, desktop: right 62% -->
+      <div class="h-[30%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
 
         <!-- Health bars -->
-        <div v-if="liveFightData?.botA" class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
-          <!-- Mobile: two-row layout (names row + HP bars row) -->
+        <div v-if="liveFightData?.botA" class="px-2 sm:px-3 py-1 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
+          <!-- Mobile: compact single-row names + HP -->
           <div class="sm:hidden">
-            <div class="flex items-center justify-between mb-1">
-              <p class="font-marker text-xs tracking-wider truncate text-neon-cyan flex-1 min-w-0">{{ liveFightData.botA.name }}</p>
-              <span class="font-funky text-neon-purple text-sm px-2 flex-shrink-0">VS</span>
-              <p class="font-marker text-xs tracking-wider truncate text-right text-neon-pink flex-1 min-w-0">{{ liveFightData.botB.name }}</p>
-            </div>
             <div class="flex items-center gap-1">
-              <div class="flex-1 h-3.5 bg-black/50 rounded-sm overflow-hidden border border-neon-cyan/30">
-                <div class="h-full bg-gradient-to-r from-neon-cyan to-neon-purple transition-all duration-500" :style="{ width: `${liveHpA}%` }" />
+              <p class="font-marker text-[10px] tracking-wider truncate text-neon-cyan flex-1 min-w-0">{{ liveFightData.botA.name }}</p>
+              <span class="font-mono font-bold text-[10px] w-5 text-right tabular-nums" :class="liveHpA > 50 ? 'text-neon-cyan' : liveHpA > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpA }}</span>
+              <div class="w-6 h-2.5 bg-black/50 rounded-sm overflow-hidden border border-neon-cyan/30">
+                <div class="h-full bg-neon-cyan transition-all duration-500" :style="{ width: `${liveHpA}%` }" />
               </div>
-              <span class="font-mono font-bold text-[10px] w-6 text-right tabular-nums" :class="liveHpA > 50 ? 'text-neon-cyan' : liveHpA > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpA }}</span>
-              <span class="font-mono font-bold text-[10px] w-6 text-left tabular-nums" :class="liveHpB > 50 ? 'text-neon-pink' : liveHpB > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpB }}</span>
-              <div class="flex-1 h-3.5 bg-black/50 rounded-sm overflow-hidden border border-neon-pink/30">
-                <div class="h-full bg-gradient-to-l from-neon-pink to-neon-purple transition-all duration-500 ml-auto" :style="{ width: `${liveHpB}%` }" />
+              <span class="font-funky text-neon-purple text-[10px] px-0.5 flex-shrink-0">VS</span>
+              <div class="w-6 h-2.5 bg-black/50 rounded-sm overflow-hidden border border-neon-pink/30">
+                <div class="h-full bg-neon-pink transition-all duration-500 ml-auto" :style="{ width: `${liveHpB}%` }" />
               </div>
-            </div>
-            <div class="flex items-center justify-between mt-0.5">
-              <span class="font-pixel text-[8px]" :class="tierClass(liveFightData.botA.tier || 0)">{{ Math.round(liveFightData.botA.eloRating || 0) }}</span>
-              <span class="font-pixel text-[8px] text-text-muted">{{ liveFightData.arenaInfo?.name }} | R{{ liveCurrentRound }}</span>
-              <span class="font-pixel text-[8px]" :class="tierClass(liveFightData.botB.tier || 0)">{{ Math.round(liveFightData.botB.eloRating || 0) }}</span>
+              <span class="font-mono font-bold text-[10px] w-5 text-left tabular-nums" :class="liveHpB > 50 ? 'text-neon-pink' : liveHpB > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpB }}</span>
+              <p class="font-marker text-[10px] tracking-wider truncate text-right text-neon-pink flex-1 min-w-0">{{ liveFightData.botB.name }}</p>
             </div>
           </div>
           <!-- Desktop: single-row layout -->