From 43f11a7e40f129d08d30b94660577564586d0c17 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Mar 2026 12:57:22 +0700
Subject: [PATCH] fix: fixed header/footer, no scroll, 100vh layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/web/templates/index.html | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 6b6a175..ab11e5d 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -12,11 +12,17 @@
             background: #0a0a1a;
             color: #e0e0e0;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-            overflow-x: hidden;
+            overflow: hidden;
+            height: 100vh;
         }
 
         /* Header */
         .header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 10;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -55,12 +61,13 @@
         .tab-content { display: none; }
         .tab-content.active { display: block; }
 
-        /* Camera feeds */
+        /* Camera feeds (detection tab) */
         .cameras {
             display: flex;
             gap: 8px;
             padding: 8px;
             justify-content: center;
+            height: calc(100vh - 48px);
         }
         .cam-box {
             flex: 1;
@@ -94,18 +101,24 @@
         }
         .viewport-3d canvas { width: 100% !important; height: 100% !important; }
 
-        /* Full-height tab layout: 3D on top, small bottom bar */
+        /* Full-height tab layout */
+        .tab-content {
+            padding-top: 48px;
+        }
         .tab-full {
-            display: flex;
-            flex-direction: column;
-            height: calc(100vh - 52px);
+            height: calc(100vh - 48px - 100px);
         }
         .tab-full .viewport-3d {
-            flex: 1;
-            height: auto;
+            width: 100%;
+            height: 100%;
             border-top: none;
         }
         .bottom-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 10;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -114,7 +127,6 @@
             background: #0d0d20;
             border-top: 1px solid #222;
             height: 100px;
-            flex-shrink: 0;
         }
         .bottom-card {
             width: 120px;