Fix break-words with HTML

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 })}>

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%);
   }