refactor progress

fluxer_app/src/components/modals/MediaViewerModal.module.css

@@ -31,6 +31,8 @@
 	height: 100%;
 	align-items: center;
 	justify-content: center;
+	min-width: 0;
+	min-height: 0;
 }
 
 .audioPlayerContainer {
@@ -45,29 +47,41 @@
 
 .videoPlayerContainer {
 	display: flex;
-	height: 100%;
-	width: 100%;
 	align-items: center;
 	justify-content: center;
+	min-width: 0;
+	min-height: 0;
+	pointer-events: auto;
+	width: min(
+		var(--video-natural-width, 960px),
+		calc(100dvw - (2 * var(--media-content-padding, 1rem)) - (2 * var(--media-side-overlay-width, 0px))),
+		calc(
+			(
+				100dvh -
+				(2 * var(--media-content-padding, 1rem)) -
+				var(--media-top-overlay-height, 48px) -
+				var(--media-bottom-overlay-height, 0px) -
+				(2 * var(--media-overlay-gap, 8px))
+			) *
+			var(--video-aspect-ratio, 1.778)
+		)
+	);
+	max-height: calc(
+		100dvh -
+		(2 * var(--media-content-padding, 1rem)) -
+		var(--media-top-overlay-height, 48px) -
+		var(--media-bottom-overlay-height, 0px) -
+		(2 * var(--media-overlay-gap, 8px))
+	);
 }
 
 .videoPlayer {
-	max-width: 100%;
-	max-height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 @media (max-width: 768px) {
-	.videoPlayerContainer {
-		width: 100%;
-		height: auto;
-		max-height: 100%;
-		aspect-ratio: auto;
-	}
-
 	.videoPlayer {
-		width: 100%;
-		height: auto;
-		max-height: 100%;
 		border-radius: 0;
 	}
 }
@@ -81,6 +95,8 @@
 }
 
 .gifvVideo {
+	width: auto;
+	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 	object-fit: contain;