fixed camera stream issue

templates/index.html

@@ -152,11 +152,11 @@
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: repeat(2, 1fr);
-      gap: 15px;
+      gap: 10px;
-      padding: 15px;
+      padding: 10px;
       box-sizing: border-box;
-      align-items: stretch;
+      align-items: center;
-      justify-items: stretch;
+      justify-items: center;
     }
 
     .camera-card {
@@ -203,21 +203,34 @@
       flex-direction: column;
       max-width: 100%;
       max-height: 100%;
+      width: fit-content;
+      height: fit-content;
     }
 
     .image-container {
       position: relative;
+      width: 100%;
+      aspect-ratio: 4 / 3;
       display: flex;
       align-items: center;
       justify-content: center;
-      flex: 1;
+      overflow: hidden;
+      border-radius: 0 0 12px 12px;
+    }
+
+    /* Calculate optimal size to fit within grid cell */
+    @supports (width: min(100%, calc((100vh - 60px - 20px) / 2 - 60px) * 4 / 3)) {
+      .stream-wrapper {
+        width: min(100%, calc(((100vh - 60px - 20px) / 2 - 60px) * 4 / 3));
+      }
     }
 
     .stream-placeholder {
-      width: 640px;
+      position: absolute;
-      height: 480px;
+      top: 0;
-      max-width: 100%;
+      left: 0;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: 5;
     }
@@ -234,12 +247,13 @@
       left: 0;
       width: 100%;
       height: 100%;
-      object-fit: contain;
+      object-fit: fill;
       object-position: center;
       display: block;
       transition: opacity 0.3s ease;
       pointer-events: none;
       z-index: 10;
+      opacity: 1;
     }
 
 
@@ -757,7 +771,7 @@
         </div>
         <div class="image-container">
           <div class="stream-placeholder" id="placeholder{{ i }}">
-            <svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
+            <svg width="100%" height="100%" viewBox="0 0 640 480" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
               <rect width="640" height="480" fill="#1a1a1a"/>
               <rect x="50" y="50" width="540" height="380" fill="none" stroke="#333" stroke-width="2" stroke-dasharray="10,5"/>
               <g transform="translate(320,240)">