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