fix: moar sizing fixes

src/element/live-chat.css

@@ -4,6 +4,22 @@
   flex-direction: column;
   padding: 8px 16px;
   border: none;
+  height: calc(100vh - 56px - 64px - 56px - 230px);
+}
+
+@media (min-width: 768px) {
+  .profile-info {
+    width: calc(100vw - 600px);
+  }
+
+  .live-chat {
+    width:  calc(100vw - 600px);
+    height: calc(100vh - 56px - 64px - 16px);
+  }
+
+  .video-content video {
+    width: 100%;
+  }
 }
 
 @media (min-width: 1020px)  {
@@ -14,8 +30,11 @@
     border-radius: 24px;
     gap: 16px;
   }
-}
 
+  .live-chat {
+    width:  320px;
+  }
+}
 
 .live-chat>.header {
   font-weight: 600;

src/pages/layout.css

@@ -9,17 +9,12 @@
   grid-template-rows: 64px 230px 56px 1fr;
   grid-template-columns: 1fr;
   height: 100vh;
-  width: 100vw;
 }
 
-.live-chat {
-  height: calc(100vh - 16px - 64px - 56px - 230px);
-}
 
 .page.home {
   display: grid;
   height: 100vh;
-  width: 100vw;
   grid-template-areas:
     "header"
     "main-content";
@@ -30,30 +25,25 @@
 @media (min-width: 768px) {
   .page {
     display: grid;
-    width: 100vw;
     height: 100vh;
     grid-template-areas:
       "header header"
       "main-content profile"
       "main-content chat";
     grid-template-rows: 64px min-content;
-    grid-template-columns: minmax(600px, 3fr) 1fr;
+    grid-template-columns: 600px 1fr;
     gap: 0;
   } 
 
   .video-content video {
-    height: calc(100vh - 64px);
+    height: 100%;
   }
 
-  .live-chat {
-    height: calc(100vh - 56px - 64px - 16px);
-  }
 }
 
 @media (min-width: 1020px) {
   .page {
     display: grid;
-    width: unset;
     height: calc(100vh - 72px);
     padding: 0 40px;
     grid-template-columns: auto 376px;
@@ -64,6 +54,7 @@
       "profile chat";
     gap: 0;
   }
+
 }
 
 @media (min-width: 2000px) {
@@ -146,6 +137,16 @@ header .profile img {
   }
 }
 
+button span.hide-on-mobile {
+  display: none;
+}
+
+@media (min-width: 1020px) {
+  button span.hide-on-mobile {
+    display: block;
+  }
+}
+
 .popout-chat {
   display: grid;
   grid-template-areas:
@@ -159,4 +160,3 @@ header .profile img {
 .popout-chat .live-chat {
   max-height: unset;
 }
-

src/pages/layout.tsx

@@ -38,7 +38,7 @@ export function LayoutPage() {
           className="btn btn-primary"
           onClick={() => setNewStream(true)}
         >
-          <span className="new-stream-button-text">New Stream</span>
+          <span className="hide-on-mobile">New Stream</span>
           <Icon name="signal" />
         </button>
         <Profile

src/pages/stream-page.css

@@ -4,19 +4,34 @@
 
 
 .video-content video {
-  width: 100%;
-  aspect-ratio: 16/9;
   max-height: 230px;
+  width: 100vw;
+  max-width: 100vw;
+}
+
+.live-chat {
+  max-width: calc(100vw - 32px);
+}
+
+.profile-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  width: 100%;
 }
 
 @media (min-width: 768px){
-  .profile-info {
+  .video-content {
-    max-height: 42px;
+    height: calc(100vh - 64px);
   }
 
   .video-content video {
     max-height: unset;
   }
+
+  .profile-info {
+    max-height: 42px;
+  }
 }
 
 .pill {
@@ -30,13 +45,6 @@
   color: inherit;
 }
 
-.profile-info {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-  width: 100%;
-}
-
 @media (min-width: 1020px) {
   .info {
     display: flex;
@@ -44,6 +52,10 @@
     justify-content: space-between;
   }
 
+  .video-content video {
+    width: unset;
+  }
+
   .profile-info {
     width: unset;
   }
@@ -66,7 +78,7 @@
     display: block;
   }
 
-  .video-content video {
+  .video-content {
     height: 100%;
   }
 

src/pages/stream-page.tsx

@@ -87,7 +87,7 @@ function ProfileInfo({ link }: { link: NostrLink }) {
         <div className="profile-info flex g24">
           <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
           <button onClick={() => setZap(true)} className="btn btn-primary zap">
-            Zap
+            <span className="hide-on-mobile">Zap</span>
             <Icon name="zap" size={16} />
           </button>
         </div>