diff --git a/src/unified_web_ui/static/style.css b/src/unified_web_ui/static/style.css index 32e171d3..d9538f62 100644 --- a/src/unified_web_ui/static/style.css +++ b/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 */ - max-width: 390px; + width: 100%; /* Made responsive */ + 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 {