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">