fix message bubble overflows due to code and pre blocks

Author: abhinavxd

frontend/src/assets/styles/main.scss

@@ -166,6 +166,17 @@
 
 .message-bubble {
   @apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
+  overflow-wrap: break-all;
+
+  * {
+    max-width: 100%;
+  }
+
+  // Force pre blocks to wrap
+  pre, code {
+    white-space: pre-wrap;
+  }
+
   table {
     width: 100% !important;
     table-layout: fixed !important;

frontend/src/features/conversation/message/ContactMessageBubble.vue

@@ -33,7 +33,7 @@
           <!-- Message Text -->
           <div
             v-if="message.content_type === 'text'"
-            class="mb-1 native-html break-all whitespace-pre-wrap"
+            class="mb-1 native-html whitespace-pre-wrap"
             :class="{ 'mb-3': message.attachments.length > 0 }"
           >
             {{ sanitizedMessageContent }}
@@ -42,7 +42,7 @@
             v-else
             :html="sanitizedMessageContent"
             :allowedSchemas="['cid', 'https', 'http', 'mailto']"
-            class="mb-1 native-html break-all"
+            class="mb-1 native-html"
             :class="{ 'mb-3': message.attachments.length > 0 }"
           />