fix(chat): wrap long URLs in message bubbles so they don't overflow (#5210)

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)" />);
 

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

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