reworked slightly main layout

web/components/chat/ChatContainer.tsx

@@ -17,11 +17,9 @@ export default function ChatContainer(props: Props) {
   const chatContainerRef = useRef(null);
 
   return (
-    <div>
+    <div style={{ height: 'calc(100vh - 104.5px)' }}>
       <Spin spinning={loading} />
-
       <Virtuoso
-        style={{ height: '400px' }}
         ref={chatContainerRef}
         initialTopMostItemIndex={999}
         data={messages}

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -0,0 +1,4 @@
+.root {
+    height: 2rem;
+    color: var(--black);
+}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -0,0 +1,38 @@
+import { MoreOutlined } from '@ant-design/icons';
+import { Input, Button } from 'antd';
+import { useEffect, useState } from 'react';
+import s from './ChatTextField.module.scss';
+
+interface Props {}
+
+export default function ChatTextField(props: Props) {
+  const [value, setValue] = useState('');
+  const [showEmojis, setShowEmojis] = useState(false);
+  // large is 40px
+  const size = 'large';
+
+  useEffect(() => {
+    console.log({ value });
+  }, [value]);
+
+  return (
+    <div>
+      <Input.Group compact style={{ display: 'flex' }}>
+        <Input
+          onChange={e => setValue(e.target.value)}
+          size={size}
+          placeholder="Enter text and hit enter!"
+        />
+        <Button
+          size={size}
+          icon={<MoreOutlined />}
+          type="default"
+          onClick={() => setShowEmojis(!showEmojis)}
+        />
+        <Button size={size} type="primary">
+          Submit
+        </Button>
+      </Input.Group>
+    </div>
+  );
+}

web/components/layouts/Main.tsx

@@ -1,7 +1,7 @@
 import { Layout } from 'antd';
 import { ServerStatusStore } from '../stores/ServerStatusStore';
 import { ClientConfigStore } from '../stores/ClientConfigStore';
-import { Content, Footer, Header, Sidebar } from '../ui';
+import { Content, Header } from '../ui';
 
 function Main() {
   return (
@@ -9,12 +9,8 @@ function Main() {
       <ServerStatusStore />
       <ClientConfigStore />
       <Layout>
-        <Sidebar />
         <Header />
-        <Layout className="site-layout" style={{ marginRight: 200 }}>
-          <Content />
-          <Footer />
-        </Layout>
+        <Content />
       </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 />

web/components/video/player.tsx

@@ -47,7 +47,11 @@ export function VideoJS(props) {
 
   return (
     <div data-vjs-player>
-      <video ref={videoRef} className="video-js vjs-big-play-centered" />
+      <video
+        ref={videoRef}
+        className="video-js vjs-big-play-centered"
+        style={{ width: '100%', height: '100%' }}
+      />
     </div>
   );
 }

web/stories/ChatTextField.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatTextField from '../components/chat/ChatTextField';
+import ChatTextField from '../components/chat/ChatTextField/ChatTextField';
 
 export default {
   title: 'owncast/Chat/Input text field',