fix: popout chat

src/pages/chat-popout.css

@@ -1,5 +1,13 @@
+.popout-chat {
+  grid-area: main-content;
+}
+
 .popout-chat .live-chat {
-    height: calc(100vh - 20px);
+  margin-left: 0;
+}
+
+.popout-chat .live-chat {
+    height: calc(100vh);
     padding: 10px;
     border: unset;
     border-radius: unset;
@@ -7,4 +15,4 @@
 
 .popout-chat .live-chat .messages {
     overflow: hidden;
-}
+}

src/pages/chat-popout.tsx

@@ -4,13 +4,18 @@ import { useParams } from "react-router-dom";
 import { parseNostrLink } from "@snort/system";
 
 export function ChatPopout() {
-    const params = useParams();
+  const params = useParams();
-    const link = parseNostrLink(params.id!);
+  const link = parseNostrLink(params.id!);
 
-    return <div className="popout-chat">
+  return (
-        <LiveChat link={link} options={{
+    <div className="popout-chat">
-            canWrite: false,
+      <LiveChat
-            showHeader: false
+        link={link}
-        }} />
+        options={{
+          canWrite: false,
+          showHeader: false,
+        }}
+      />
     </div>
-}
+  );
+}

src/pages/layout.css

@@ -20,10 +20,24 @@
   grid-template-columns: 1fr;
 }
 
+.popout-chat {
+  display: grid;
+  grid-template-areas:
+    "main-content";
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  height: 100vh;
+  gap: 0;
+}
+
 .live-chat {
   max-height: calc(100vh - 385px);
 }
 
+.popout-chat .live-chat {
+  max-height: unset;
+}
+
 @media (min-width: 768px) {
   .video-content video {
     height: calc(100vh - 64px);

src/pages/layout.tsx

@@ -80,7 +80,13 @@ export function LayoutPage() {
 
   return (
     <div
-      className={location.pathname.startsWith("/live/") ? "page" : "page home"}
+      className={
+        location.pathname === "/"
+          ? "page home"
+          : location.pathname.startsWith("/chat/")
+          ? "page chat"
+          : "page"
+      }
     >
       <header>
         <div className="logo" onClick={() => navigate("/")}>