fix(web-ui): Refine LMC spacing and ensure consistent control widths

Addressed user feedback regarding precise layout adjustments for the Lamp
Matrix Control (LMC) interface.

- **Removed all explicit padding:** Removed `padding` from `.main-container`
  and `padding-right` from `.lamp-view` to make content flush with browser edges
  as per new instructions.
- **Unified Control Widths:** Explicitly set `width: 470px` for `.region-control`,
  `.control-panel`, and `.center-lamp-control` to ensure they precisely match
  the calculated 470px width of the `.matrix-grid`. This creates visual
  consistency and horizontal alignment across all LMC components.
- **Centered LMC Components:** Ensured all LMC components are horizontally
  centered within the `.lamp-view` by setting `align-items: center` on
  `.lamp-view .main-content`.

src/unified_web_ui/static/style.css

@@ -21,6 +21,9 @@ h1 {
     width: 100%;
     /* Removed max-width to allow full screen utilization */
     margin: 0 auto;
+    /* 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 */
 }
 
 /* Tabs are hidden by default on desktop, dynamically added for mobile */
@@ -37,8 +40,9 @@ h1 {
 /* --- Lamp View (Original styles adapted to dark theme) --- */
 .lamp-view {
     flex: 0 0 auto; /* Allow content to determine width, do not shrink */
-    min-width: 480px; /* Ensure enough space for 5x5 matrix (470px + buffer) */
+    /* Removed min-width as padding will affect total width */
-    border-right: 1px solid #333;
+    /* Removed padding-right: 20px; */
+    border-right: 1px solid #333; /* Reintroduced the line separating the sections */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -54,11 +58,11 @@ h1 {
 
 .lamp-view .main-content { /* Added for original styling effect */
     display: flex;
-    flex-direction: row;
+    flex-direction: column; /* Changed to column to stack matrix and controls vertically */
-    align-items: flex-start;
+    align-items: center; /* Changed to center to horizontally center its children */
-    gap: 40px;
+    gap: 20px; /* Adjusted gap for vertical stacking */
-    flex-wrap: wrap; /* Allow wrapping for responsiveness */
+    flex-wrap: wrap; /* Allow wrapping for responsiveness - not strictly needed for column but kept for safety */
-    justify-content: center;
+    justify-content: center; /* This will center the column within the lamp-view if its width allows */
     width: 100%; /* Ensure main-content fills lamp-view's width */
 }
 
@@ -71,7 +75,7 @@ h1 {
     background-color: #333;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* Kept margin-bottom for spacing below grid */
     /* Removed width: 100%; to let grid determine its own width */
     box-sizing: border-box; /* Account for padding */
 }
@@ -96,9 +100,10 @@ h1 {
 }
 
 .region-control {
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* Kept margin-bottom for spacing below region-control */
-    text-align: center;
+    /* Removed text-align: center; as parent's align-items will handle centering */
-    width: 100%; /* Ensure it takes full width within lamp-view */
+    width: 470px; /* Explicitly set width to match matrix grid */
+    box-sizing: border-box; /* Ensure padding/border included in width */
 }
 
 .region-control select {
@@ -109,16 +114,17 @@ h1 {
     border-radius: 5px;
     background-color: #333; /* Adapted to theme */
     color: #ffffff;
-    width: 200px;
+    width: 100%; /* Fill parent's width */
+    box-sizing: border-box; /* Include padding in width */
 }
 
 .control-panel, .center-lamp-control {
     background-color: #444; /* Adapted to theme */
     padding: 20px;
     border-radius: 10px;
-    width: 100%; /* Made responsive */
+    width: 470px; /* Explicitly set width to match matrix grid */
-    max-width: 470px; /* Aligns with matrix grid's intrinsic width */
+    /* Removed width: 100%; max-width: 470px; */
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* Kept margin-bottom for spacing below control panel */
     box-sizing: border-box; /* Account for padding */
 }
 
@@ -206,7 +212,8 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
 
 /* --- Camera View (Individual streams) --- */
 .camera-view {
-    width: 75%;
+    flex: 1; /* Allow it to grow and shrink to fill available space */
+    /* Removed width: 75%; */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -217,8 +224,9 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
 
 .camera-streams-grid {
     display: grid; /* Use CSS Grid */
-    width: 100%;
+    /* Removed width: 100%; */
-    height: 100%;
+    /* Removed height: 100%; */
+    flex-grow: 1; /* Allow it to grow to fill available space */
     grid-template-rows: 1fr 2fr; /* 1/3 for color, 2/3 for monos */
     grid-template-columns: 1fr; /* Single column for the main layout */
     gap: 10px;
@@ -358,4 +366,4 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
         width: 100%;
         height: auto; /* Let aspect-ratio define height */
     }
-}
+}