From 7d251dbd785366a0f0ac44ce15d56e7254b27484 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 7 Mar 2026 21:44:36 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20fight=20layout=20=E2=80=94=2050?=
 =?UTF-8?q?/50=20split,=20no=20page=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Canvas 50% top, battle log 50% bottom on mobile
- Add overflow-hidden to prevent page scrolling past viewport
- Bots no longer cut off with more canvas space

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

diff --git a/frontend/src/components/FightViewer.vue b/frontend/src/components/FightViewer.vue
index 43a0c9a..cc84eea 100644
--- a/frontend/src/components/FightViewer.vue
+++ b/frontend/src/components/FightViewer.vue
@@ -399,10 +399,10 @@ async function replay() {
 </script>
 
 <template>
-  <div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2">
+  <div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2 overflow-hidden">
 
-    <!-- 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">
+    <!-- LEFT: Battle Log — mobile: bottom 50%, desktop: left 38% -->
+    <div class="flex h-[50%] 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" />
@@ -439,8 +439,8 @@ async function replay() {
       </div>
     </div>
 
-    <!-- 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">
+    <!-- RIGHT: Game Canvas — mobile: top 50%, desktop: right 62% -->
+    <div class="h-[50%] 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 27310a7..69eac68 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -655,11 +655,11 @@ function stopAutoBattle() {
     </div>
 
     <!-- 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">
+    <div v-else-if="isLive && isHumanFight" class="flex-1 flex flex-col lg:flex-row gap-1 sm:gap-2 min-h-0 overflow-hidden">
 
-      <!-- Battle Log + Human Input — mobile: bottom 70%, desktop: left 38% -->
+      <!-- Battle Log + Human Input — mobile: bottom 50%, desktop: left 38% -->
       <div class="flex flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden
-                  h-[70%] lg:h-auto lg:w-[38%] order-2 lg:order-1">
+                  h-[50%] 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" />
@@ -777,8 +777,8 @@ function stopAutoBattle() {
         </div>
       </div>
 
-      <!-- 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">
+      <!-- Game Canvas — mobile: top 50%, desktop: right 62% -->
+      <div class="h-[50%] 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 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">