diff --git a/ui/desktop/src/components/MarkdownContent.test.tsx b/ui/desktop/src/components/MarkdownContent.test.tsx
index 889fb624968e..b3aa6b260ce8 100644
--- a/ui/desktop/src/components/MarkdownContent.test.tsx
+++ b/ui/desktop/src/components/MarkdownContent.test.tsx
@@ -322,4 +322,72 @@ more text`;
});
});
});
+
+ describe('URL Overflow Handling', () => {
+ it('handles very long URLs without overflow', async () => {
+ const longUrl =
+ 'https://example-docs.com/document/d/1oruk3lcrnhoOXMFzBJB8X6qQ5AtQTmj4XXxXk3xK-3g/edit?usp=sharing&mode=edit&version=1';
+ const content = `Check out this document: ${longUrl}
+
+Another very long URL: https://www.example.com/very/long/path/with/many/segments/and/parameters?param1=value1¶m2=value2¶m3=value3¶m4=value4¶m5=value5`;
+
+ const { container } = render();
+
+ await waitFor(() => {
+ expect(screen.getByText(/Check out this document/)).toBeInTheDocument();
+ expect(screen.getByText(/Another very long URL/)).toBeInTheDocument();
+ });
+
+ // Check that URLs are rendered as links
+ const links = container.querySelectorAll('a');
+ expect(links.length).toBeGreaterThan(0);
+
+ // Check that links have proper CSS classes for word breaking
+ links.forEach((link) => {
+ // The CSS should allow the text to break
+ expect(link).toBeInTheDocument();
+ });
+ });
+
+ it('handles markdown links with long URLs', async () => {
+ const longUrl =
+ 'https://example-docs.com/document/d/1oruk3lcrnhoOXMFzBJB8X6qQ5AtQTmj4XXxXk3xK-3g/edit?usp=sharing&mode=edit&version=1';
+ const content = `[Click here for the document](${longUrl})`;
+
+ render();
+
+ await waitFor(() => {
+ const link = screen.getByRole('link', { name: 'Click here for the document' });
+ expect(link).toBeInTheDocument();
+ expect(link).toHaveAttribute('href', longUrl);
+ });
+ });
+
+ it('handles multiple long URLs in the same message', async () => {
+ const content = `Here are some long URLs:
+
+1. Example Doc: https://example-docs.com/document/d/1oruk3lcrnhoOXMFzBJB8X6qQ5AtQTmj4XXxXk3xK-3g/edit?usp=sharing&mode=edit&version=1
+2. Another long URL: https://www.example.com/very/long/path/with/many/segments/and/parameters?param1=value1¶m2=value2¶m3=value3
+3. Third URL: https://api.example.com/v1/users/12345/documents/67890/attachments/abcdef123456789?format=json&include=metadata&sort=created_at`;
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByText(/Here are some long URLs/)).toBeInTheDocument();
+ expect(screen.getByText(/Example Doc/)).toBeInTheDocument();
+ expect(screen.getByText(/Another long URL/)).toBeInTheDocument();
+ expect(screen.getByText(/Third URL/)).toBeInTheDocument();
+ });
+ });
+
+ it('applies word-break CSS classes to the container', () => {
+ const content = 'Test content';
+ render();
+
+ const markdownContainer = document.querySelector('.prose');
+ expect(markdownContainer).toBeInTheDocument();
+ expect(markdownContainer).toHaveClass('prose-a:break-all');
+ expect(markdownContainer).toHaveClass('prose-a:overflow-wrap-anywhere');
+ });
+ });
});
diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index 5c4020fbda31..a8bb679b3516 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -139,21 +139,22 @@ const MarkdownContent = memo(function MarkdownContent({
return (