fix(web-ui): Correct Lamp Matrix visual and layout responsiveness

Resolved issues with the Lamp Matrix control being cropped and distorting,
and not maintaining a fixed 5x5 layout.

- **Fixed 5x5 Matrix:** Reverted `.matrix-grid` to `grid-template-columns: repeat(5, 70px)`
  to enforce a consistent 5x5 lamp layout.
- **Prevented Warping:** Removed `width: 100%` from `.matrix-grid` to allow its
  width to be intrinsically determined by its content, preventing distortion.
- **Ensured Adequate Space:** Set `.lamp-view` to `flex: 0 0 auto` with a
  `min-width: 480px` to guarantee sufficient space for the fixed matrix and
  controls without cropping.
- **Responsive Control Panels:** Applied `max-width: 470px` to `.control-panel`
  and `.center-lamp-control` to align their size with the matrix grid while
  maintaining responsiveness in smaller viewports.
- **Full Screen Utilization:** Ensured the overall application expands to fill
  the browser window by removing `max-width` from `.main-container`.

src/unified_web_ui/static/style.css

@@ -19,7 +19,7 @@ h1 {
     flex-direction: row;
     height: calc(100vh - 80px); /* Adjust for h1 height */
     width: 100%;
-    max-width: 1600px; /* Added max-width for better screen space utilization */
+    /* Removed max-width to allow full screen utilization */
     margin: 0 auto;
 }
 
@@ -36,7 +36,8 @@ h1 {
 
 /* --- Lamp View (Original styles adapted to dark theme) --- */
 .lamp-view {
-    width: 25%;
+    flex: 0 0 auto; /* Allow content to determine width, do not shrink */
+    min-width: 480px; /* Ensure enough space for 5x5 matrix (470px + buffer) */
     border-right: 1px solid #333;
     display: flex;
     flex-direction: column;
@@ -58,11 +59,12 @@ h1 {
     gap: 40px;
     flex-wrap: wrap; /* Allow wrapping for responsiveness */
     justify-content: center;
+    width: 100%; /* Ensure main-content fills lamp-view's width */
 }
 
 .matrix-grid {
     display: grid;
-    grid-template-columns: repeat(5, 70px);
+    grid-template-columns: repeat(5, 70px); /* Fixed 5-column grid */
     grid-template-rows: repeat(5, 70px);
     gap: 20px;
     padding: 20px;
@@ -70,6 +72,8 @@ h1 {
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     margin-bottom: 20px;
+    /* Removed width: 100%; to let grid determine its own width */
+    box-sizing: border-box; /* Account for padding */
 }
 
 .lamp {
@@ -112,9 +116,10 @@ h1 {
     background-color: #444; /* Adapted to theme */
     padding: 20px;
     border-radius: 10px;
-    width: 390px; /* Calculated from 5 * 70px + 4 * 20px */
+    width: 100%; /* Made responsive */
-    max-width: 390px;
+    max-width: 470px; /* Aligns with matrix grid's intrinsic width */
     margin-bottom: 20px;
+    box-sizing: border-box; /* Account for padding */
 }
 
 .control-panel.inactive-control {
@@ -246,7 +251,6 @@ 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 */
-    /* Remove explicit width: 100%; height: 100%; from here */
     max-width: 100%; /* Ensure it doesn't exceed the boundaries of its parent */
     max-height: 100%; /* Ensure it doesn't exceed the boundaries of its parent */
     overflow: hidden; /* Ensure image fits and is clipped if necessary */
@@ -259,8 +263,6 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
     max-height: 100%;
     object-fit: contain;
     border-radius: 10px; /* Added corner radius to the image itself */
-    /* Removed width: 100%; height: 100%; */
-    /* Removed aspect-ratio from here */
 }
 
 .camera-label {