Merge pull request #6524 from DougReeder/chat-multiple-lines

Fixes #6522 multi-line chat messages
Hubs-Foundation · Dec 3, 2024 · b0cff4d · b0cff4d
2 parents be1d82d + a1ea0f4
commit b0cff4d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/react-components/room/ChatSidebar.js b/src/react-components/room/ChatSidebar.js
@@ -406,30 +406,34 @@ function getMessageComponent(message, intl) {
     }
     case "video":
       return (
-        <MessageBubble key={message.id} media>
-          <video controls src={message.body.src} />
+        <div className={styles.messageRow}>
+          <MessageBubble key={message.id} media>
+            <video controls src={message.body.src} />
+          </MessageBubble>
           <IconButton
             className={styles.iconButton}
             onClick={onShareClick}
             title={intl.formatMessage({ id: "share-popover.title", defaultMessage: "Share" })}
           >
             <ShareIcon />
           </IconButton>
-        </MessageBubble>
+        </div>
       );
     case "image":
     case "photo":
       return (
-        <MessageBubble key={message.id} media>
-          <img src={message.body.src} />
+        <div className={styles.messageRow}>
+          <MessageBubble key={message.id} media>
+            <img src={message.body.src} />
+          </MessageBubble>
           <IconButton
             className={styles.iconButton}
             onClick={onShareClick}
             title={intl.formatMessage({ id: "share-popover.title", defaultMessage: "Share" })}
           >
             <ShareIcon />
           </IconButton>
-        </MessageBubble>
+        </div>
       );
     case "permission":
       return (

diff --git a/src/react-components/room/ChatSidebar.scss b/src/react-components/room/ChatSidebar.scss
@@ -40,18 +40,21 @@
   flex-direction: column;
 }
 
+:local(.message-row) {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+
 :local(.message-bubble) {
   background-color: theme.$chat-bubble-bg-color-received;
   border-radius: 19px;
   margin: 2px;
   padding: 10px 16px;
   max-width: 80%;
   width: max-content;
-  display: flex;
-  flex-direction: row;
-  justify-content: start;
   font-size: theme.$font-size-md;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   line-height: 1.25;
 
   img,
@@ -70,12 +73,15 @@
     align-self: flex-end;
   }
 
+  :local(.message-row) {
+    flex-direction: row-reverse;
+    justify-content: end;
+  }
+
   :local(.message-bubble) {
     background-color: theme.$chat-bubble-bg-color-sent;
     color: theme.$chat-bubble-text-color-sent;
     align-self: flex-end;
-    flex-direction: row-reverse;
-    justify-content: end;
 
     a {
       color: theme.$chat-bubble-text-color-sent;