Changed Layout a bit

now we use less state for the layout. Chat and header are now sticky.
Moved some css vars.

web/components/ui/Content/Content.module.scss

@@ -1,26 +1,20 @@
 .root {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr auto;
 }
 
 .mobileChat {
   display: block;
-  position: absolute;
-  background-color: white;
   top: 0px;
   width: 100%;
-  height: calc(50vh - var(--header-h));
 }
 
 .leftCol {
   display: grid;
-  // -64px, which is the header
-  grid-template-rows: 50vh calc(50vh - var(--header-h));
 }
 .lowerRow {
   position: relative;
   display: grid;
-  grid-template-rows: 1fr var(--header-h);
 }
 
 .pageContentSection {
@@ -35,7 +29,4 @@
   .mobileChat {
     display: none;
   }
-  .root[data-columns='2'] {
-    grid-template-columns: 1fr var(--chat-w);
-  }
 }

web/components/ui/Content/Content.tsx

@@ -45,7 +45,7 @@ export default function ContentComponent() {
 
   const total = 0;
 
-  const isShowingChatColumn =
+  const chatVisible =
     chatState === ChatState.Available && chatVisibility === ChatVisibilityState.Visible;
 
   // This is example content. It should be removed.
@@ -65,7 +65,7 @@ export default function ContentComponent() {
   ));
 
   return (
-    <Content className={`${s.root}`} data-columns={isShowingChatColumn ? 2 : 1}>
+    <Content className={`${s.root}`}>
       <div className={`${s.leftCol}`}>
         <OwncastPlayer source="/hls/stream.m3u8" online={online} />
         <Statusbar
@@ -105,7 +105,7 @@ export default function ContentComponent() {
           <Footer version={version} />
         </div>
       </div>
-      {isShowingChatColumn && <Sidebar />}
+      {chatVisible && <Sidebar />}
     </Content>
   );
 }

web/components/ui/Header/Header.module.scss

@@ -1,9 +1,12 @@
 .header {
+  position: sticky;
+  top: 0px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1;
   padding: 0.5rem 1rem;
+  background-color: var(--default-bg-color);
   .logo {
     display: flex;
     align-items: center;

web/components/ui/Sidebar/Sidebar.module.scss

@@ -5,6 +5,10 @@
 
 @media (min-width: 768px) {
   .root {
+    position: sticky;
+    top: var(--header-h);
     display: flex;
+    min-width: 300px !important;
+    max-height: calc(100vh - var(--header-h));
   }
 }

web/styles/globals.scss

@@ -1,12 +1,5 @@
 // @import "~antd/dist/antd.dark";
 
-:root {
-  // chat variables
-  // --header-h: 64px;
-  --chat-w: 300px;
-  --chat-input-h: 40.5px;
-}
-
 html,
 body {
   padding: 0;

web/styles/variables.css

@@ -78,4 +78,9 @@
   --default-link-color: #6941c6;
   --default-bg-color: #1b1a26;
   --default-text-color: #f2f4f7;
+
+  /* Layout variables */
+  --header-h: 64px;
+  --chat-w: 300px;
+  --chat-input-h: 40.5px;
 }