камера на локальном хосте теперь

cmd/server/web/css/style.css

@@ -53,7 +53,6 @@ h1 {
     margin-bottom: 8px;
 }
 
-/* СТАТУСЫ - ЦВЕТА */
 .status-ok {
     color: #00ff88 !important;
 }
@@ -113,7 +112,6 @@ h1 {
     margin-right: 10px;
 }
 
-/* ЗАЛИВКА ПРОГРЕСС-БАРА */
 .fill {
     height: 100%;
     width: 0%;
@@ -124,7 +122,6 @@ h1 {
     transition: width 0.25s linear;
 }
 
-/* Заливка при потере связи */
 .fill.no-connection {
     background: #555555 !important;
     box-shadow: none !important;
@@ -154,13 +151,11 @@ h1 {
 .sig-bar-2 { height: 66%; }
 .sig-bar-3 { height: 100%; }
 
-/* Неактивные сигнальные бары */
 .sig-bar.dim {
     background-color: transparent;
     border-color: #1a3a1a;
 }
 
-/* Активные сигнальные бары */
 .sig-bar.active-1,
 .sig-bar.active-2,
 .sig-bar.active-3 {
@@ -168,7 +163,6 @@ h1 {
     border-color: #c46b1f;
 }
 
-/* Нет связи - сигнальные бары */
 .sig-bar.no-connection {
     background-color: #555555 !important;
     border-color: #555555 !important;
@@ -224,99 +218,90 @@ h1 {
     opacity: 0;
 }
 
-
-/* ОТКРЫТОЕ СОСТОЯНИЕ */
-.cam-modal.open {
-    transform: translateX(0);
-}
-
-.cam-header {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px;
-    color: white;
-    background: #222;
-}
-
-.cam-frame {
-    flex: 1;
-    width: 100%;
-    border: none;
-    object-fit: contain;
-    background: #000;
-    min-height: 200px;
-}
-
-.cam-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #00ff88;
-    font-size: 18px;
-}
-
-.hidden {
-    display: none;
-}
-
 /* ===== SPLIT LAYOUT ===== */
-
 .layout {
     display: flex;
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
+    height: calc(100vh - 60px);
+    width: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 .panel {
     height: 100%;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .left {
-    flex: 1;
+    flex: 1 1 auto;
     min-width: 300px;
-    transition: all 0.3s ease;
+    padding: 10px;
+    transition: flex 0.3s ease;
 }
 
 .right {
     flex: 0 0 40%;
-    min-width: 300px;
-    transition: all 0.3s ease;
+    min-width: 0;
+    background: black;
+    position: relative;
+    transition: flex 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
+    overflow: hidden;
 }
 
 .right.hidden {
     flex: 0 0 0 !important;
     min-width: 0 !important;
     width: 0 !important;
-    overflow: hidden;
     opacity: 0;
+    pointer-events: none;
 }
 
 /* DRAG BAR */
 .resizer {
-    width: 6px;
+    width: 8px;
+    min-width: 8px;
     cursor: col-resize;
     background: #00ff88;
-    opacity: 0.25;
-    transition: opacity 0.2s;
+    opacity: 0.3;
+    transition: opacity 0.2s, width 0.3s ease, min-width 0.3s ease;
+    flex-shrink: 0;
+    z-index: 10;
 }
 
 .resizer:hover {
+    opacity: 0.8;
+}
+
+.resizer:active {
     opacity: 1;
 }
 
 .resizer.hidden {
-    display: none;
+    width: 0 !important;
+    min-width: 0 !important;
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Когда камера скрыта, левая панель занимает всё пространство */
+.layout:has(.right.hidden) .left {
+    flex: 1 1 100% !important;
 }
 
 /* ===== CAMERA ===== */
-
 .cam-modal {
     height: 100%;
     display: flex;
     flex-direction: column;
     background: black;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+}
+
+.right.hidden .cam-modal {
+    opacity: 0;
+    transition: opacity 0.2s ease;
 }
 
 .cam-header {
@@ -341,6 +326,7 @@ h1 {
     color: #00ff88;
 }
 
+/* ===== CAMERA BUTTON ===== */
 .cam-btn {
     position: fixed;
     top: 20px;
@@ -369,20 +355,6 @@ h1 {
     font-size: 18px;
 }
 
-/* Панель камеры скрыта */
-.panel.right[style*="display: none"] {
-    display: none !important;
-}
-
-/* Когда камера скрыта, левая панель на весь экран */
-.layout:has(.panel.right[style*="display: none"]) .left {
-    flex: 1;
-}
-
-.layout:has(.panel.right[style*="display: none"]) .resizer {
-    display: none;
-}
-
 /* ===== MOBILE ===== */
 @media (max-width: 500px) {
     h1 {
@@ -407,4 +379,22 @@ h1 {
         line-height: 1.5;
         max-height: 55vh;
     }
+    
+    .layout {
+        flex-direction: column;
+        height: auto;
+    }
+    
+    .left {
+        min-height: 50vh;
+    }
+    
+    .right {
+        flex: 0 0 50vh !important;
+        min-width: 100% !important;
+    }
+    
+    .resizer {
+        display: none;
+    }
 }