From 0d9a5b3b8658289aa975e4b39e29fc8a7d3bf810 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 24 Jul 2023 21:43:51 +0100
Subject: [PATCH] more css tweaks

---
 src/element/live-video-player.tsx |  8 ++++----
 src/pages/stream-page.css         | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/element/live-video-player.tsx b/src/element/live-video-player.tsx
index 834a2f6..ed867d8 100644
--- a/src/element/live-video-player.tsx
+++ b/src/element/live-video-player.tsx
@@ -59,12 +59,12 @@ export function LiveVideoPlayer(
   }, [video, streamCached, props.status]);
 
   return (
-    <>
+    <div className="video-overlay">
       <div className={status}>
         <div>{status}</div>
       </div>
       <video ref={video} autoPlay={true} poster={props.poster} src={src} playsInline={true} controls={status === VideoStatus.Online} />
-    </>
+    </div>
   );
 }
 
@@ -90,11 +90,11 @@ export function WebRTCPlayer(props: VideoPlayerProps) {
   }, [video, streamCached]);
 
   return (
-    <>
+    <div className="video-overlay">
       <div className={status}>
         <div>{status}</div>
       </div>
       <video ref={video} autoPlay={true} poster={props.poster} controls={status === VideoStatus.Online} />
-    </>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 8401991..24923e8 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -2,7 +2,9 @@
   display: grid;
   grid-template-columns: auto 450px;
   gap: var(--gap-m);
-  height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+  height: calc(
+    100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)
+  );
 }
 
 .stream-page .video-content {
@@ -10,26 +12,34 @@
   gap: var(--gap-s);
   display: flex;
   flex-direction: column;
+}
+
+.stream-page .video-overlay {
   position: relative;
 }
 
 .stream-page .video-content video {
   width: 100%;
-  max-height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+  aspect-ratio: 16/9;
 }
 
 .stream-page .live-chat {
   padding: 24px 16px 8px 24px;
   border: 1px solid #171717;
   border-radius: 24px;
-  height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s) - 24px - 8px);
+  height: calc(
+    100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s) -
+      24px - 8px
+  );
 }
 
 @media (max-width: 1020px) {
   .stream-page {
     display: flex;
     flex-direction: column;
-    height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+    height: calc(
+      100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)
+    );
   }
 
   .stream-page .video-content {