From 1f9c167bd23af0b002e1ddefb5ab323a8e1d1787 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Mon, 7 Oct 2024 12:54:11 +0100
Subject: [PATCH 1/2] fix: hard breaking long string words and intelligently
 breaking or skipping hyphenated/whitespace to next line for good reading XP

---
 frontend/src/conversation/ConversationBubble.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 543699ed5..2463d1223 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -59,7 +59,12 @@ const ConversationBubble = forwardRef<
         className={`flex flex-row-reverse self-end flex-wrap ${className}`}
       >
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
-        <div className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal break-normal">
+        <div
+          style={{
+            'word-break': 'break-word',
+          }}
+          className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
+        >
           {message}
         </div>
       </div>

From c8648101a7e6b8059bd7fc6be476652091deee2c Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Mon, 7 Oct 2024 15:57:47 +0100
Subject: [PATCH 2/2] build: style key fix

---
 frontend/src/conversation/ConversationBubble.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 2463d1223..3d956e2e8 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -61,7 +61,7 @@ const ConversationBubble = forwardRef<
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
         <div
           style={{
-            'word-break': 'break-word',
+            wordBreak: 'break-word',
           }}
           className="ml-10 mr-2 flex items-center rounded-[28px] bg-purple-30 py-[14px] px-[19px] text-white max-w-full whitespace-pre-wrap leading-normal"
         >