From 43ceca240710d74d93e2096c2fdc4904e147e216 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Fri, 17 Oct 2025 11:56:03 -0400
Subject: [PATCH 1/3] Fix messages overflow/wrapping

---
 apps/web/ui/messages/messages-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/ui/messages/messages-panel.tsx b/apps/web/ui/messages/messages-panel.tsx
index eba7523fb2c..8430cd2f85d 100644
--- a/apps/web/ui/messages/messages-panel.tsx
+++ b/apps/web/ui/messages/messages-panel.tsx
@@ -159,7 +159,7 @@ export function MessagesPanel({
 
                       <div
                         className={cn(
-                          "flex flex-col items-start gap-1",
+                          "flex min-w-0 flex-col items-start gap-1",
                           isMySide && "items-end",
                         )}
                       >
@@ -176,7 +176,7 @@ export function MessagesPanel({
                         {/* Message box */}
                         <div
                           className={cn(
-                            "max-w-lg whitespace-pre-wrap rounded-xl px-4 py-2.5 text-sm",
+                            "w-full max-w-lg whitespace-pre-wrap break-words rounded-xl px-4 py-2.5 text-sm",
                             isMySide
                               ? "text-content-inverted rounded-br bg-neutral-700"
                               : "text-content-default rounded-bl bg-neutral-100",

From 103f9e8fac2d352fa0e651af71492d7c6c7833fc Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Fri, 17 Oct 2025 12:05:41 -0400
Subject: [PATCH 2/3] Update messages-panel.tsx

---
 apps/web/ui/messages/messages-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/ui/messages/messages-panel.tsx b/apps/web/ui/messages/messages-panel.tsx
index 8430cd2f85d..310dff9a373 100644
--- a/apps/web/ui/messages/messages-panel.tsx
+++ b/apps/web/ui/messages/messages-panel.tsx
@@ -389,7 +389,7 @@ function CampaignMessage({
 
       <div
         className={cn(
-          "flex flex-col items-start gap-1",
+          "flex min-w-0 flex-col items-start gap-1",
           isMySide && "items-end",
         )}
       >
@@ -405,7 +405,7 @@ function CampaignMessage({
 
         <div
           className={cn(
-            "max-w-lg rounded-xl text-sm",
+            "w-full max-w-lg rounded-xl text-sm",
             isMySide
               ? "text-content-inverted rounded-br bg-neutral-700"
               : "text-content-default rounded-bl bg-neutral-100",

From 8ecce9c79489f0e7a1a74cc22c2c48a1cb978392 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Fri, 17 Oct 2025 12:16:27 -0400
Subject: [PATCH 3/3] Update messages-panel.tsx

---
 apps/web/ui/messages/messages-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/ui/messages/messages-panel.tsx b/apps/web/ui/messages/messages-panel.tsx
index 310dff9a373..8d13b3c5c44 100644
--- a/apps/web/ui/messages/messages-panel.tsx
+++ b/apps/web/ui/messages/messages-panel.tsx
@@ -176,7 +176,7 @@ export function MessagesPanel({
                         {/* Message box */}
                         <div
                           className={cn(
-                            "w-full max-w-lg whitespace-pre-wrap break-words rounded-xl px-4 py-2.5 text-sm",
+                            "max-w-[min(100%,512px)] whitespace-pre-wrap break-words rounded-xl px-4 py-2.5 text-sm",
                             isMySide
                               ? "text-content-inverted rounded-br bg-neutral-700"
                               : "text-content-default rounded-bl bg-neutral-100",
@@ -405,7 +405,7 @@ function CampaignMessage({
 
         <div
           className={cn(
-            "w-full max-w-lg rounded-xl text-sm",
+            "max-w-[min(100%,512px)] rounded-xl text-sm",
             isMySide
               ? "text-content-inverted rounded-br bg-neutral-700"
               : "text-content-default rounded-bl bg-neutral-100",