worked on chat styling

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

@@ -7,8 +7,25 @@
   .root {
     position: sticky;
     top: var(--header-h);
-    display: flex;
-    min-width: 300px !important;
+    display: block;
     max-height: calc(100vh - var(--header-h));
   }
 }
+/* 
+First div is .ant-layout-sider-children
+Only way to target it apparently
+*/
+.root > div {
+  display: flex;
+  flex-flow: column nowrap;
+  -moz-box-flex: 1 !important;
+  flex-grow: 1 !important;
+  height: 100% !important;
+}
+
+.chatHeader {
+  text-align: center;
+  color: var(--text-color-secondry);
+  border-bottom: 1px solid var(--color-owncast-gray-700);
+  font-variant: small-caps;
+}

web/components/ui/Sidebar/Sidebar.tsx

@@ -18,13 +18,16 @@ export default function Sidebar() {
 
   return (
     <Sider
-      className={`${s.root}`}
+      className={s.root}
       collapsed={chatVisibility === ChatVisibilityState.Hidden}
       collapsedWidth={0}
-      width="100%"
+      width={320}
     >
-      <ChatContainer messages={messages} state={chatState} />
-      <ChatTextField />
+      <div className={s.chatHeader}>
+        <span>stream chat</span>
+      </div>
+        <ChatContainer messages={messages} state={chatState} />
+        <ChatTextField />
     </Sider>
   );
 }