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={styles.chatContainer}>
-      {
-        // <div className={s.chatHeader}>
-        //   <span>stream chat</span>
-        // </div>
-        //
-      }
       {MessagesTable}
       {showInput && <ChatTextField />}
     </div>
@@ -210,5 +205,5 @@ export const ChatContainer: FC<ChatContainerProps> = ({
 
 ChatContainer.defaultProps = {
   showInput: true,
-  height: 'calc(100vh - 170px)',
+  height: 'auto',
 };

web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss

@@ -1,4 +1,4 @@
 .join {
-  margin: 5px;
+  padding: 5px;
   text-align: center;
 }

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -2,6 +2,7 @@
   * {
     z-index: 100;
   }
+  border-right: 2px solid currentColor;
   position: relative;
   font-size: 0.9rem;
   padding: 0px 15px 5px 5px;
@@ -14,6 +15,8 @@
   }
 
   .message {
+    overflow: hidden;
+    overflow-wrap: anywhere;
     color: var(--theme-color-components-chat-text);
 
     mark {
@@ -23,34 +26,10 @@
     }
   }
 
-  .customBorder {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 5px;
-    height: 100%;
-    overflow: hidden;
-    &:after {
-      content: '';
-      width: 10px;
-      height: 100%;
-      position: absolute;
-      top: 0%;
-      right: 0px;
-      background-color: currentColor;
-      border-radius: var(--theme-rounded-corners);
-    }
-  }
-
   &.ownMessage {
-    .customBorder {
+    border-right: none;
-      left: auto;
+    border-left: 2px solid currentColor;
-      right: 0px;
+
-      opacity: 0.85;
-      &:after {
-        left: 0px;
-      }
-    }
     .background {
       position: absolute;
       z-index: -1;
@@ -82,11 +61,5 @@
 }
 
 .messagePadding {
-  padding: 3.5px;
+  padding: 0px 3px;
-  padding-bottom: 0px;
-  padding-top: 7px;
-}
-
-.messagePaddingCollapsed {
-  padding-top: 2px;
 }

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -93,7 +93,6 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
             />
           </div>
         )}
-        <div className={styles.customBorder} style={{ color }} />
         <div className={styles.background} style={{ color }} />
       </div>
     </div>