From a1ea0f4199bea5a7da474724ffff02ab71f6041e Mon Sep 17 00:00:00 2001
From: "P. Douglas Reeder" <reeder.29@gmail.com>
Date: Fri, 29 Nov 2024 13:25:12 -0500
Subject: [PATCH] Fixes #6522 multi-line chat messages

---
 src/react-components/room/ChatSidebar.js   | 16 ++++++++++------
 src/react-components/room/ChatSidebar.scss | 18 ++++++++++++------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/react-components/room/ChatSidebar.js b/src/react-components/room/ChatSidebar.js
index ce0e03436b..8495344336 100644
--- a/src/react-components/room/ChatSidebar.js
+++ b/src/react-components/room/ChatSidebar.js
@@ -406,8 +406,10 @@ 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}
@@ -415,13 +417,15 @@ function getMessageComponent(message, intl) {
           >
             <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}
@@ -429,7 +433,7 @@ function getMessageComponent(message, intl) {
           >
             <ShareIcon />
           </IconButton>
-        </MessageBubble>
+        </div>
       );
     case "permission":
       return (
diff --git a/src/react-components/room/ChatSidebar.scss b/src/react-components/room/ChatSidebar.scss
index e392f2b62e..3df5ae7fad 100644
--- a/src/react-components/room/ChatSidebar.scss
+++ b/src/react-components/room/ChatSidebar.scss
@@ -40,6 +40,12 @@
   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;
@@ -47,11 +53,8 @@
   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;