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>
   );
 }