Moved chat header into ChatContainer and created component folder

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -0,0 +1,8 @@
+
+.chatHeader {
+  text-align: center;
+  padding: 5px 0;
+  color: var(--text-color-secondary);
+  border-bottom: 1px solid var(--color-owncast-gray-700);
+  font-variant: small-caps;
+}

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -2,10 +2,11 @@ import { Spin } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { useRef } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
-import { ChatMessage } from '../../interfaces/chat-message.model';
+import { ChatMessage } from '/interfaces/chat-message.model';
-import { ChatState } from '../../interfaces/application-state';
+import { ChatState } from '/interfaces/application-state';
-import ChatUserMessage from './ChatUserMessage';
+import ChatUserMessage from '../ChatUserMessage';
-import { MessageType } from '../../interfaces/socket-events';
+import { MessageType } from '/interfaces/socket-events';
+import s from './ChatContainer.module.scss';
 
 interface Props {
   messages: ChatMessage[];
@@ -30,6 +31,9 @@ export default function ChatContainer(props: Props) {
 
   return (
     <div>
+      <div className={s.chatHeader}>
+        <span>stream chat</span>
+      </div>
       <Spin spinning={loading} indicator={spinIcon} />
       <Virtuoso
         style={{ height: '80vh' }}

web/components/chat/ChatContainer/index.ts

@@ -0,0 +1 @@
+export { default } from './ChatContainer';

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>