From 29d69fb5502f1f9399bf4e8e92b0dd7b3e8d1829 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Mar 2026 12:54:03 +0700
Subject: [PATCH] fix: three equal 120x90 cards in bottom bar (cam, cam, info)

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

diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 15e4203..6b6a175 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -107,7 +107,7 @@
         }
         .bottom-bar {
             display: flex;
-            align-items: flex-end;
+            align-items: center;
             justify-content: center;
             gap: 6px;
             padding: 4px 8px;
@@ -116,15 +116,18 @@
             height: 100px;
             flex-shrink: 0;
         }
-        .cam-thumb {
-            height: 100%;
+        .bottom-card {
+            width: 120px;
+            height: 90px;
             flex-shrink: 0;
-        }
-        .cam-thumb img {
-            height: 100%;
-            width: auto;
             border-radius: 4px;
             border: 1px solid #222;
+            overflow: hidden;
+        }
+        .bottom-card img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
             display: block;
         }
 
@@ -149,18 +152,7 @@
         .calibrate-status .ok { color: #4ecca3; }
         .calibrate-status .fail { color: #ff4444; }
 
-        /* VAR panel card */
-        .var-panel-bottom {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            gap: 2px;
-            padding: 4px 8px;
-            background: #111128;
-            border: 1px solid #2a2a4a;
-            border-radius: 4px;
-            font-size: 9px;
-        }
+        /* VAR panel inherits from .cam-card via shared rule above */
         .var-indicator {
             display: flex;
             align-items: center;
@@ -213,8 +205,11 @@
             height: 60px;
         }
 
-        /* Camera params card */
-        .cam-card {
+        /* Info card (same size as cam cards) */
+        .cam-card, .var-panel-bottom {
+            width: 120px;
+            height: 90px;
+            flex-shrink: 0;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -225,6 +220,7 @@
             border-radius: 4px;
             font-size: 9px;
             color: #888;
+            overflow: hidden;
         }
         .cc-title {
             font-size: 8px;
@@ -319,8 +315,8 @@
     <div class="tab-full">
         <div class="viewport-3d" id="court-3d"></div>
         <div class="bottom-bar">
-            <div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div>
-            <div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
+            <div class="bottom-card"><img id="court-cam1" alt="Camera 1"></div>
+            <div class="bottom-card"><img id="court-cam0" alt="Camera 0"></div>
             <div class="cam-card">
                 <div class="cc-title">Base Setup</div>
                 <div class="cc-item">Distance <b id="paramPosY">1.0</b>m</div>
@@ -344,8 +340,8 @@
     <div class="tab-full">
         <div class="viewport-3d" id="trajectory-3d"></div>
         <div class="bottom-bar">
-            <div class="cam-thumb"><img id="traj-cam1" alt="Camera 1"></div>
-            <div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div>
+            <div class="bottom-card"><img id="traj-cam1" alt="Camera 1"></div>
+            <div class="bottom-card"><img id="traj-cam0" alt="Camera 0"></div>
             <div class="var-panel-bottom">
                 <div class="var-indicator">
                     <div class="var-dot" id="varDot"></div>