From 5e7f874bfd89c93b986af627c42a6693aa9cc411 Mon Sep 17 00:00:00 2001
From: Tempest <glahera@spirals.cc>
Date: Wed, 3 Dec 2025 12:29:23 +0700
Subject: [PATCH] feat(web-ui): Constrain camera feed section and Basler
 streams to viewport height

Addressed user feedback to prevent the camera feed section and its internal
streams from overflowing the viewport.

- **Explicitly constrained camera-view height:** Ensured `.camera-view` utilizes
  `height: 100%` and `overflow-y: auto` to fit within its parent (`.main-container`)
  and allow internal scrolling if content is too tall.
- **Refined individual stream container sizing:** Removed fixed `height: 100%`
  from `.camera-container-individual` and re-enabled `max-width: 100%`. This,
  combined with `aspect-ratio` and `max-height: 100%`, allows individual camera
  streams to scale correctly within their allocated grid cells without causing
  overflow.
- **Ensured grid row containment:** Applied `height: 100%` and `overflow: hidden`
  to `.camera-color-row` and `.camera-mono-row` to tightly constrain content
  within grid rows.
---
 src/unified_web_ui/static/style.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/unified_web_ui/static/style.css b/src/unified_web_ui/static/style.css
index b145f1ba..454bbd1c 100644
--- a/src/unified_web_ui/static/style.css
+++ b/src/unified_web_ui/static/style.css
@@ -4,7 +4,9 @@ body {
     font-family: Arial, sans-serif; /* Reverted to original font */
     margin: 0;
     padding: 0;
-    min-height: 100vh;
+    display: flex; /* Changed to flex */
+    flex-direction: column; /* Set flex direction to column */
+    height: 100vh; /* Make body fill viewport height */
 }
 
 h1 {
@@ -17,10 +19,11 @@ h1 {
 .main-container {
     display: flex; /* Desktop default */
     flex-direction: row;
-    height: calc(100vh - 80px); /* Adjust for h1 height */
+    flex-grow: 1; /* Make main-container fill remaining vertical space */
     width: 100%;
     /* Removed max-width to allow full screen utilization */
     margin: 0 auto;
+    /* Removed height: calc(100vh - 80px); */
     /* Removed padding: 20px; */
     box-sizing: border-box; /* Ensure padding is included in element's total width and height */
     gap: 20px; /* Added spacing between the two main sections */
@@ -41,7 +44,8 @@ h1 {
 .lamp-view {
     flex: 0 0 auto; /* Allow content to determine width, do not shrink */
     /* Removed min-width as padding will affect total width */
-    /* Removed padding-right: 20px; */
+    padding-left: 2vw; /* Added 2vw padding on the left side */
+    padding-right: 2vw; /* Added 2vw padding on the right side */
     border-right: 1px solid #333; /* Reintroduced the line separating the sections */
     display: flex;
     flex-direction: column;
@@ -123,7 +127,6 @@ h1 {
     padding: 20px;
     border-radius: 10px;
     width: 470px; /* Explicitly set width to match matrix grid */
-    /* Removed width: 100%; max-width: 470px; */
     margin-bottom: 20px; /* Kept margin-bottom for spacing below control panel */
     box-sizing: border-box; /* Account for padding */
 }
@@ -213,6 +216,8 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
 /* --- Camera View (Individual streams) --- */
 .camera-view {
     flex: 1; /* Allow it to grow and shrink to fill available space */
+    height: 100%; /* Added to make it fill the height of its parent */
+    overflow-y: auto; /* Added to allow vertical scrolling if content exceeds height */
     /* Removed width: 75%; */
     display: flex;
     flex-direction: column;
@@ -240,6 +245,7 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
     justify-content: center;
     align-items: center;
     overflow: hidden; /* Ensure content is clipped */
+    height: 100%; /* Explicitly set height to fill grid cell */
 }
 
 .camera-mono-row {
@@ -249,6 +255,7 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
     grid-template-columns: 1fr 1fr; /* Two columns for the mono cameras */
     gap: 10px;
     overflow: hidden; /* Ensure content is clipped */
+    height: 100%; /* Explicitly set height to fill grid cell */
 }
 
 .camera-container-individual {
@@ -259,7 +266,8 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
     align-items: center;
     background-color: transparent;
     aspect-ratio: var(--aspect-ratio); /* Keep aspect-ratio on container */
-    max-width: 100%; /* Ensure it doesn't exceed the boundaries of its parent */
+    max-width: 100%; /* Re-added max-width */
+    /* Removed height: 100%; */
     max-height: 100%; /* Ensure it doesn't exceed the boundaries of its parent */
     overflow: hidden; /* Ensure image fits and is clipped if necessary */
     box-sizing: border-box; /* Include padding and border in the element's total width and height */