Fixed messages not wrapping + changed some styles to accomodate scrollbar better

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

@@ -13,7 +13,7 @@
   width: 100%;
   justify-content: center;
   position: absolute;
-  bottom: 5px;
+  bottom: 75px;
 }
 
 .nameChangeView {
@@ -32,3 +32,14 @@
     }
   }
 }
+
+.chatContainer {
+  display: grid;
+  grid-template-rows: 1fr 65px;
+  height: 100%;
+}
+.virtuoso {
+  width: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -164,7 +164,8 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     () => (
       <>
         <Virtuoso
-          style={{ height, width: 'auto' }}
+          style={{ height }}
+          className={styles.virtuoso}
           ref={chatContainerRef}
           initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
           data={messages}
@@ -195,13 +196,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   );
 
   return (
-    <div style={{ height: '100%' }}>
-      {
-        // <div className={s.chatHeader}>
-        //   <span>stream chat</span>
-        // </div>
-        //
-      }
+    <div className={styles.chatContainer}>
       {MessagesTable}
       {showInput && <ChatTextField />}
     </div>
@@ -210,5 +205,5 @@ export const ChatContainer: FC<ChatContainerProps> = ({
 
 ChatContainer.defaultProps = {
   showInput: true,
-  height: 'calc(100vh - 170px)',
+  height: 'auto',
 };