diff --git a/templates/index.html b/templates/index.html
index 4b23698..3d83871 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -152,11 +152,11 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
- gap: 15px;
- padding: 15px;
+ gap: 10px;
+ padding: 10px;
box-sizing: border-box;
- align-items: stretch;
- justify-items: stretch;
+ align-items: center;
+ justify-items: center;
}
.camera-card {
@@ -203,21 +203,34 @@
flex-direction: column;
max-width: 100%;
max-height: 100%;
+ width: fit-content;
+ height: fit-content;
}
.image-container {
position: relative;
+ width: 100%;
+ aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
- flex: 1;
+ overflow: hidden;
+ border-radius: 0 0 12px 12px;
+ }
+
+ /* Calculate optimal size to fit within grid cell */
+ @supports (width: min(100%, calc((100vh - 60px - 20px) / 2 - 60px) * 4 / 3)) {
+ .stream-wrapper {
+ width: min(100%, calc(((100vh - 60px - 20px) / 2 - 60px) * 4 / 3));
+ }
}
.stream-placeholder {
- width: 640px;
- height: 480px;
- max-width: 100%;
- max-height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
display: block;
z-index: 5;
}
@@ -234,12 +247,13 @@
left: 0;
width: 100%;
height: 100%;
- object-fit: contain;
+ object-fit: fill;
object-position: center;
display: block;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
+ opacity: 1;
}
@@ -757,7 +771,7 @@
-