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;

src/pages/chat-popout.tsx

@@ -7,10 +7,15 @@ export function ChatPopout() {
   const params = useParams();
   const link = parseNostrLink(params.id!);
 
-    return <div className="popout-chat">
-        <LiveChat link={link} options={{
+  return (
+    <div className="popout-chat">
+      <LiveChat
+        link={link}
+        options={{
           canWrite: false,
-            showHeader: 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("/")}>