shudder5305/pupilometer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(web-ui): Constrain camera feed section and Basler streams to viewport height

Browse Source 
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.
This commit is contained in:
Tempest 2025-12-03 12:29:23 +07:00
parent 43019286cf
commit 5e7f874bfd
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/unified_web_ui/static/style.css
View File

@ -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 */