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.
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`.
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`.
This commit introduces a refined layout and styling for the camera streams
in the unified web UI. Key changes include:
- **Responsive Grid Layout:** Implemented a CSS Grid-based layout for camera feeds,
ensuring the color camera occupies 1/3 height and mono cameras 2/3 height.
- **Improved Stream Fit:** Adjusted CSS to ensure individual camera streams
(visual containers) perfectly fit within their designated borders without
cropping, distortion, or excessive transparent space, addressing user feedback
regarding "zoomed out" or ill-fitting streams.
- **Aesthetic Enhancements:** Removed black backgrounds from stream containers
and applied corner radii for a modern look.
- **Padding Adjustments:** Optimized padding to prevent UI elements from appearing
cramped while maintaining visual separation.
- **New Tests:** Added robust visual tests () to programmatically
verify layout correctness and ensure tight fitting of camera feeds within
their containers.
- **Dependency Updates:** Updated to reflect any new or
changed Python dependencies.
- **Test Runner & Gitignore:** Included script and updated
to properly ignore virtual environment artifacts.
