reworked slightly main layout

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

@@ -0,0 +1,14 @@
+.root {
+    display: grid;
+    grid-template-columns: 8fr 4fr;
+}
+
+.leftCol {
+    display: grid;
+    // -64px, which is the header
+    grid-template-rows: 50vh calc(50vh - 64px);
+}
+.lowerRow {
+    display: grid;
+    grid-template-rows: 1fr 64px;
+}

web/components/ui/Content/Content.tsx

@@ -1,10 +1,15 @@
 import { useRecoilValue } from 'recoil';
 import { Layout, Row, Col, Tabs } from 'antd';
-import { clientConfigStateAtom } from '../../stores/ClientConfigStore';
+import { chatVisibilityAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import CustomPageContent from '../../CustomPageContent';
 import OwncastPlayer from '../../video/OwncastPlayer';
 import FollowerCollection from '../../FollowersCollection';
+import s from './Content.module.scss';
+import Sidebar from '../Sidebar';
+import { ChatVisibilityState } from '../../../interfaces/application-state';
+import Footer from '../Footer';
+import Grid from 'antd/lib/card/Grid';
 
 const { TabPane } = Tabs;
 
@@ -12,29 +17,30 @@ const { Content } = Layout;
 
 export default function FooterComponent() {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
+  const chatOpen = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
   const { extraPageContent } = clientConfig;
 
   return (
-    <Content style={{ margin: '80px 16px 0', overflow: 'initial' }}>
-      <div>
-        <Row>
-          <Col span={24}>
-            <OwncastPlayer source="https://watch.owncast.online" />
-          </Col>
-        </Row>
-        <Row>
-          <Col span={24}>
-            <Tabs defaultActiveKey="1" type="card">
-              <TabPane tab="About" key="1">
-                <CustomPageContent content={extraPageContent} />
-              </TabPane>
-              <TabPane tab="Followers" key="2">
-                <FollowerCollection />
-              </TabPane>
-            </Tabs>
-          </Col>
-        </Row>
-      </div>
+    <Content className={`${s.root}`}>
+      <Col className={`${s.leftCol}`}>
+        <OwncastPlayer source="https://watch.owncast.online" />
+        <div className={`${s.lowerRow}`}>
+          <Tabs defaultActiveKey="1" type="card">
+            <TabPane tab="About" key="1">
+              <CustomPageContent content={extraPageContent} />
+            </TabPane>
+            <TabPane tab="Followers" key="2">
+              <FollowerCollection />
+            </TabPane>
+          </Tabs>
+          <Footer />
+        </div>
+      </Col>
+      {chatOpen && (
+        <Col>
+          <Sidebar />
+        </Col>
+      )}
     </Content>
   );
 }

web/components/ui/Footer/Footer.tsx

@@ -5,5 +5,5 @@ const { Footer } = Layout;
 export default function FooterComponent(props) {
   const { version } = props;
 
-  return <Footer style={{ textAlign: 'center' }}>Footer: Owncast {version}</Footer>;
+  return <Footer style={{ textAlign: 'center', height: '64px' }}>Footer: Owncast {version}</Footer>;
 }

web/components/ui/Sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ import {
   chatStateAtom,
 } from '../../stores/ClientConfigStore';
 import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
-import ChatTextField from '../../chat/ChatTextField';
+import ChatTextField from '../../chat/ChatTextField/ChatTextField';
 
 export default function Sidebar() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
@@ -20,13 +20,7 @@ export default function Sidebar() {
     <Sider
       collapsed={chatVisibility === ChatVisibilityState.Hidden}
       collapsedWidth={0}
-      width={300}
-      style={{
-        position: 'fixed',
-        right: 0,
-        top: 0,
-        bottom: 0,
-      }}
+      width="100%"
     >
       <ChatContainer messages={messages} state={chatState} />
       <ChatTextField />