From fe55152667645b83df5197e74510340568430af1 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Thu, 3 Nov 2022 15:22:18 -0400
Subject: [PATCH] Fix break-words with HTML

---
 app/soapbox/features/chats/components/chat-message-list.tsx | 2 +-
 app/styles/application.scss                                 | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 6ca569c7b..f02fae4fd 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -314,7 +314,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 tabIndex={0}
               >
                 {maybeRenderMedia(chatMessage)}
-                <Text size='sm' theme='inherit' dangerouslySetInnerHTML={{ __html: parseContent(chatMessage) }} />
+                <Text size='sm' theme='inherit' className='break-word-nested' dangerouslySetInnerHTML={{ __html: parseContent(chatMessage) }} />
               </div>
 
               <div className={classNames({ 'order-1': !isMyMessage })}>
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 1d8fd3739..eefd83de8 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -83,6 +83,10 @@
 @tailwind utilities;
 
 @layer utilities {
+  .break-word-nested > p {
+    word-break: break-word;
+  }
+
   .shadow-inset {
     box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
   }