Added mobile chat and some responsiveness

weird 0 popping out when toggling chat. wasn't able to find which
component is responsible. Used bare mininum scss. May refactor in the
future.

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

@@ -1,14 +1,33 @@
 .root {
     display: grid;
-    grid-template-columns: 8fr 4fr;
+    grid-template-columns: 1fr;
+}
+
+.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 - 64px);
+    grid-template-rows: 50vh calc(50vh - var(--header-h));
 }
 .lowerRow {
+    position: relative;
     display: grid;
-    grid-template-rows: 1fr 64px;
-}
+    grid-template-rows: 1fr var(--header-h);
+}
+
+@media (min-width: 768px) {
+    .mobileChat {
+        display: none;
+    }
+    .root[data-columns='2'] {
+        grid-template-columns: 1fr var(--chat-w);
+    }
+}

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Row, Col, Tabs } from 'antd';
+import { Layout, Tabs } from 'antd';
 import { chatVisibilityAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import CustomPageContent from '../../CustomPageContent';
@@ -7,9 +7,12 @@ 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';
+import ChatContainer from '../../chat/ChatContainer';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import { chatMessagesAtom, chatStateAtom } from '../../stores/ClientConfigStore';
+import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
+import ChatTextField from '../../chat/ChatTextField/ChatTextField';
 
 const { TabPane } = Tabs;
 
@@ -18,11 +21,14 @@ const { Content } = Layout;
 export default function FooterComponent() {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const chatOpen = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
+  const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
+  const chatState = useRecoilValue<ChatState>(chatStateAtom);
+
   const { extraPageContent } = clientConfig;
 
   return (
-    <Content className={`${s.root}`}>
-      <Col className={`${s.leftCol}`}>
+    <Content className={`${s.root}`} data-columns={chatOpen ? 2 : 1}>
+      <div className={`${s.leftCol}`}>
         <OwncastPlayer source="https://watch.owncast.online" />
         <div className={`${s.lowerRow}`}>
           <Tabs defaultActiveKey="1" type="card">
@@ -33,14 +39,16 @@ export default function FooterComponent() {
               <FollowerCollection />
             </TabPane>
           </Tabs>
+          {chatOpen && (
+            <div className={`${s.mobileChat}`}>
+              <ChatContainer messages={messages} state={chatState} />
+              <ChatTextField />
+            </div>
+          )}
           <Footer />
         </div>
-      </Col>
-      {chatOpen && (
-        <Col>
-          <Sidebar />
-        </Col>
-      )}
+      </div>
+      {chatOpen && <Sidebar />}
     </Content>
   );
 }