Moved chat header into ChatContainer and created component folder

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

@@ -4,6 +4,7 @@
 }
 
 .mobileChat {
+  position: relative;
   display: block;
   top: 0px;
   width: 100%;

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

@@ -24,9 +24,3 @@ Only way to target it apparently
   height: 100% !important;
 }
 
-.chatHeader {
-  text-align: center;
-  color: var(--text-color-secondary);
-  border-bottom: 1px solid var(--color-owncast-gray-700);
-  font-variant: small-caps;
-}

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import ChatContainer from '../../chat/ChatContainer';
+import ChatContainer from '/components/chat/ChatContainer';
 import s from './Sidebar.module.scss';
 import {
   chatMessagesAtom,
@@ -23,9 +23,6 @@ export default function Sidebar() {
       collapsedWidth={0}
       width={320}
     >
-      <div className={s.chatHeader}>
-        <span>stream chat</span>
-      </div>
       <ChatContainer messages={messages} state={chatState} />
       <ChatTextField />
     </Sider>