From 493983ccc05fd0a706bf94dd0ed8e3c1f3a8d686 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 9 Mar 2026 07:57:37 +0000
Subject: [PATCH] fix: prevent fight view scrolling on mobile with tab bar

All pages used h-[calc(100dvh-4rem)] which only subtracted the top
navbar but ignored the mobile tab bar's pb-14 bottom padding, causing
content to overflow and scroll. Changed all pages to h-full so they
fill the flex parent (main element) which already handles both the
navbar and tab bar spacing correctly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ArenaPage.vue       | 2 +-
 frontend/src/pages/BotProfilePage.vue  | 2 +-
 frontend/src/pages/DocsPage.vue        | 2 +-
 frontend/src/pages/FightCardPage.vue   | 2 +-
 frontend/src/pages/FightPage.vue       | 2 +-
 frontend/src/pages/HomePage.vue        | 2 +-
 frontend/src/pages/HumanFightPage.vue  | 6 +++---
 frontend/src/pages/JoinBoutPage.vue    | 2 +-
 frontend/src/pages/LeaderboardPage.vue | 2 +-
 frontend/src/pages/RegisterPage.vue    | 2 +-
 frontend/src/pages/SchedulePage.vue    | 2 +-
 11 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/ArenaPage.vue b/frontend/src/pages/ArenaPage.vue
index 55e337b..f73587b 100644
--- a/frontend/src/pages/ArenaPage.vue
+++ b/frontend/src/pages/ArenaPage.vue
@@ -34,7 +34,7 @@ const tierClass = (t: number) => `tier-${t}`
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col px-3 sm:px-6 py-4 sm:py-6 overflow-hidden">
+  <div class="h-full flex flex-col px-3 sm:px-6 py-4 sm:py-6 overflow-hidden">
     <div class="max-w-5xl mx-auto w-full flex flex-col flex-1 min-h-0">
 
       <!-- Header -->
diff --git a/frontend/src/pages/BotProfilePage.vue b/frontend/src/pages/BotProfilePage.vue
index 17fb8ed..57c774e 100644
--- a/frontend/src/pages/BotProfilePage.vue
+++ b/frontend/src/pages/BotProfilePage.vue
@@ -354,7 +354,7 @@ const tierClass = (t: number) => `tier-${t}`
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col overflow-hidden">
+  <div class="h-full flex flex-col overflow-hidden">
     <div class="max-w-lg lg:max-w-4xl mx-auto w-full flex flex-col flex-1 min-h-0 px-6 py-4 overflow-y-auto">
 
       <div v-if="isLoading" class="flex-1 flex items-center justify-center">
diff --git a/frontend/src/pages/DocsPage.vue b/frontend/src/pages/DocsPage.vue
index 213714c..eff98db 100644
--- a/frontend/src/pages/DocsPage.vue
+++ b/frontend/src/pages/DocsPage.vue
@@ -286,7 +286,7 @@ const registrationTest = `{
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col overflow-hidden">
+  <div class="h-full flex flex-col overflow-hidden">
     <div class="flex flex-col flex-1 min-h-0 px-6 py-4 max-w-4xl mx-auto w-full">
 
       <div class="text-center mb-4 shrink-0">
diff --git a/frontend/src/pages/FightCardPage.vue b/frontend/src/pages/FightCardPage.vue
index 0911619..1696d53 100644
--- a/frontend/src/pages/FightCardPage.vue
+++ b/frontend/src/pages/FightCardPage.vue
@@ -114,7 +114,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col overflow-hidden relative">
+  <div class="h-full flex flex-col overflow-hidden relative">
 
     <!-- Page background -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none">
diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index 6e7ca59..498cf39 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -594,7 +594,7 @@ function stopAutoBattle() {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col px-2 sm:px-3 py-2 sm:py-3 overflow-hidden">
+  <div class="h-full flex flex-col px-2 sm:px-3 py-2 sm:py-3 overflow-hidden">
     <div v-if="isLoading" class="flex-1 flex items-center justify-center">
       <p class="font-display text-text-muted animate-pulse tracking-wider">LOADING FIGHT...</p>
     </div>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index aeaebbe..2e8e297 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -315,7 +315,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden relative">
+  <div class="h-full flex flex-col items-center justify-center px-6 overflow-hidden relative">
     <!-- Crowd characters floating around edges -->
     <template v-for="(c, i) in crowd" :key="i">
       <SpritePreview
diff --git a/frontend/src/pages/HumanFightPage.vue b/frontend/src/pages/HumanFightPage.vue
index ae10518..dd03f1c 100644
--- a/frontend/src/pages/HumanFightPage.vue
+++ b/frontend/src/pages/HumanFightPage.vue
@@ -225,7 +225,7 @@ function goToArena() {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col items-center px-4 overflow-hidden">
+  <div class="h-full flex flex-col items-center px-4 overflow-hidden">
     <div class="max-w-lg w-full flex-1 min-h-0 overflow-y-auto py-4">
 
       <!-- Feedback flash overlay -->
@@ -416,8 +416,8 @@ function goToArena() {
       </div>
 
       <!-- PHASE: REPLAY -->
-      <div v-else-if="phase === 'replay' && fight" class="w-full">
-        <div class="h-[calc(100dvh-8rem)] min-h-0 relative">
+      <div v-else-if="phase === 'replay' && fight" class="w-full flex-1 min-h-0 flex flex-col">
+        <div class="flex-1 min-h-0 relative">
           <FightViewer :fight="fight" :autoplay="true" class="h-full" />
         </div>
         <div class="flex gap-2 mt-2">
diff --git a/frontend/src/pages/JoinBoutPage.vue b/frontend/src/pages/JoinBoutPage.vue
index fae09c3..f703322 100644
--- a/frontend/src/pages/JoinBoutPage.vue
+++ b/frontend/src/pages/JoinBoutPage.vue
@@ -419,7 +419,7 @@ function handleSignOut() {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden">
+  <div class="h-full flex flex-col items-center justify-center px-6 overflow-hidden">
     <div class="max-w-md w-full slide-up overflow-y-auto max-h-full py-4">
 
       <!-- STEP: LOGIN -->
diff --git a/frontend/src/pages/LeaderboardPage.vue b/frontend/src/pages/LeaderboardPage.vue
index 601587c..b92fa2c 100644
--- a/frontend/src/pages/LeaderboardPage.vue
+++ b/frontend/src/pages/LeaderboardPage.vue
@@ -78,7 +78,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
+  <div class="h-full flex flex-col px-6 py-6 overflow-hidden">
     <div class="max-w-4xl mx-auto w-full flex flex-col flex-1 min-h-0">
 
       <!-- Header -->
diff --git a/frontend/src/pages/RegisterPage.vue b/frontend/src/pages/RegisterPage.vue
index 7a8cbd2..fc4b3e7 100644
--- a/frontend/src/pages/RegisterPage.vue
+++ b/frontend/src/pages/RegisterPage.vue
@@ -57,7 +57,7 @@ function goFight() {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden">
+  <div class="h-full flex flex-col items-center justify-center px-6 overflow-hidden">
     <div class="max-w-md w-full slide-up">
 
       <div class="text-center mb-8">
diff --git a/frontend/src/pages/SchedulePage.vue b/frontend/src/pages/SchedulePage.vue
index 9e884b1..494a712 100644
--- a/frontend/src/pages/SchedulePage.vue
+++ b/frontend/src/pages/SchedulePage.vue
@@ -58,7 +58,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-[calc(100dvh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
+  <div class="h-full flex flex-col px-6 py-6 overflow-hidden">
     <div class="max-w-4xl mx-auto w-full flex flex-col flex-1 min-h-0">
 
       <!-- Header -->