From 0b35919357d2e5590a16036416f95936d1aaf372 Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Tue, 13 Sep 2022 08:43:59 +0200
Subject: [PATCH] Fixed messages not wrapping + changed some styles to
 accomodate scrollbar better

---
 .../ChatContainer/ChatContainer.module.scss   | 13 +++++-
 .../chat/ChatContainer/ChatContainer.tsx      | 13 ++----
 .../ChatJoinMessage.module.scss               |  2 +-
 .../ChatUserMessage.module.scss               | 41 ++++---------------
 .../chat/ChatUserMessage/ChatUserMessage.tsx  |  1 -
 5 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss
index cdcb17884..3cf57fecf 100644
--- a/web/components/chat/ChatContainer/ChatContainer.module.scss
+++ b/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;
+}
diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 8186d7f3d..e81573af2 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/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',
 };
diff --git a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
index 2024207fd..1757a2ed9 100644
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
+++ b/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
@@ -1,4 +1,4 @@
 .join {
-  margin: 5px;
+  padding: 5px;
   text-align: center;
 }
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
index f5c69db5c..f6d33330d 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/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 {
-      left: auto;
-      right: 0px;
-      opacity: 0.85;
-      &:after {
-        left: 0px;
-      }
-    }
+    border-right: none;
+    border-left: 2px solid currentColor;
+
     .background {
       position: absolute;
       z-index: -1;
@@ -82,11 +61,5 @@
 }
 
 .messagePadding {
-  padding: 3.5px;
-  padding-bottom: 0px;
-  padding-top: 7px;
-}
-
-.messagePaddingCollapsed {
-  padding-top: 2px;
+  padding: 0px 3px;
 }
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index 15c4ad701..c5bab3b74 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/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>