fix: viewport-fixed layout on all pages for mobile

- Replace 100vh with 100dvh everywhere (accounts for mobile browser chrome)
- DocsPage: viewport-fixed with tabs pinned, tab content scrolls internally
- BotProfilePage: overflow-hidden outer, internal scroll container
- JoinBoutPage: viewport-fixed with internal overflow scroll
- HumanFightPage: viewport-fixed, flex-1 content area with internal scroll
- All other pages: vh → dvh for correct mobile sizing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/BotProfilePage.vue

@@ -343,8 +343,8 @@ const tierClass = (t: number) => `tier-${t}`
 </script>
 
 <template>
-  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-y-auto">
-    <div class="max-w-lg lg:max-w-4xl mx-auto w-full flex flex-col flex-1 min-h-0">
+  <div class="h-[calc(100dvh-4rem)] 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">
         <p class="font-display text-text-muted animate-pulse">LOADING...</p>
@@ -355,7 +355,7 @@ const tierClass = (t: number) => `tier-${t}`
       </div>
 
       <template v-else>
-        <div class="lg:flex lg:gap-6 lg:items-stretch" style="min-height: calc(100vh - 8rem);">
+        <div class="lg:flex lg:gap-6 lg:items-stretch">
 
           <!-- LEFT COLUMN: Character + Stats + Actions -->
           <div class="lg:w-[380px] lg:shrink-0 flex flex-col">