From 0dd1396d44cd1a01e3da8056e7a7cbc10aee5d2e Mon Sep 17 00:00:00 2001
From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com>
Date: Mon, 27 Jul 2026 17:05:05 +0530
Subject: [PATCH] fix(chat): wrap long URLs in message bubbles so they don't
 overflow (#5210)

---
 .../components/AgentMessageBubble.test.tsx           | 12 ++++++++++++
 .../conversations/components/AgentMessageBubble.tsx  |  2 +-
 .../conversations/components/ChatThreadView.tsx      |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/src/features/conversations/components/AgentMessageBubble.test.tsx b/app/src/features/conversations/components/AgentMessageBubble.test.tsx
index f7d8f2af0..86b02af8f 100644
--- a/app/src/features/conversations/components/AgentMessageBubble.test.tsx
+++ b/app/src/features/conversations/components/AgentMessageBubble.test.tsx
@@ -41,6 +41,18 @@ describe('AgentMessageBubble markdown links', () => {
     expect(mocks.openWorkspacePath).not.toHaveBeenCalled();
   });
 
+  test('wraps a long auto-linked URL so it cannot overflow the bubble', () => {
+    // A bare URL is auto-linked by GFM; without an overflow-wrap rule the long
+    // unbreakable token expands past the bubble edge and gets clipped.
+    render(
+      <BubbleMarkdown content="https://github.com/tinyhumansai/openhuman/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc" />
+    );
+
+    const link = screen.getByRole('link');
+    expect(link.className).toContain('[overflow-wrap:anywhere]');
+    expect(link.className).toContain('break-words');
+  });
+
   test('opens workspace links through the Tauri workspace path command', async () => {
     render(<BubbleMarkdown content="[summary](workspace:memory_tree/content/summary.md)" />);
 
diff --git a/app/src/features/conversations/components/AgentMessageBubble.tsx b/app/src/features/conversations/components/AgentMessageBubble.tsx
index 22f55b72e..0abebe4b0 100644
--- a/app/src/features/conversations/components/AgentMessageBubble.tsx
+++ b/app/src/features/conversations/components/AgentMessageBubble.tsx
@@ -76,7 +76,7 @@ function MarkdownAnchor({ href, children }: { href?: string; children?: ReactNod
           // Ignore launcher errors from OS URL handler failures.
         });
       }}
-      className="cursor-pointer underline">
+      className="cursor-pointer underline break-words [overflow-wrap:anywhere]">
       {children}
     </a>
   );
diff --git a/app/src/features/conversations/components/ChatThreadView.tsx b/app/src/features/conversations/components/ChatThreadView.tsx
index ea5579545..da6d5a892 100644
--- a/app/src/features/conversations/components/ChatThreadView.tsx
+++ b/app/src/features/conversations/components/ChatThreadView.tsx
@@ -877,7 +877,7 @@ export const ChatThreadView = forwardRef<ChatThreadViewHandle, ChatThreadViewPro
                                       </div>
                                     )}
                                     {(displayText || showTime) && (
-                                      <div className="rounded-2xl px-4 py-2.5 bg-primary-500 text-content-inverted rounded-br-md break-words overflow-hidden">
+                                      <div className="rounded-2xl px-4 py-2.5 bg-primary-500 text-content-inverted rounded-br-md break-words [overflow-wrap:anywhere] overflow-hidden">
                                         {displayText && (
                                           <BubbleMarkdown content={displayText} tone="user" />
                                         )}