fix(flows): stop wide tables from horizontally scrolling the message list

A markdown table with a long unbreakable cell (e.g. a FLAG hash) overflowed
the message bubble and dragged the entire message list into a horizontal
scroll, cutting off the left edge of every line. Wrap tables in an
overflow-x-auto container so wide content scrolls inside its own box while the
list scrolls only vertically. Covers both automation and assistant, which
render through the same Markdown component.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
(cherry picked from commit 8745c51388)

frontend/src/components/shared/markdown.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import Markdown from './markdown';
+
+const tableMarkdown = [
+    '| Name | Email | Token |',
+    '| --- | --- | --- |',
+    '| sample | sample@example.com | TOKEN{0000000000000000000000000000000000000000000000000000000000000000} |',
+].join('\n');
+
+describe('Markdown', () => {
+    it('wraps a table in a horizontally scrollable container so wide content cannot widen the message list', () => {
+        const { container } = render(<Markdown>{tableMarkdown}</Markdown>);
+
+        const table = container.querySelector('table');
+        expect(table).not.toBeNull();
+        expect(table?.parentElement?.className).toContain('overflow-x-auto');
+    });
+
+    it('keeps the table wrapped when search highlighting is active', () => {
+        const { container } = render(<Markdown searchValue="sample">{tableMarkdown}</Markdown>);
+
+        const table = container.querySelector('table');
+        expect(table?.parentElement?.className).toContain('overflow-x-auto');
+    });
+});

frontend/src/components/shared/markdown.tsx

@@ -229,8 +229,14 @@ function Markdown({ children, className, searchValue }: MarkdownProps) {
             };
         }
 
+        components.table = ({ children: nodeChildren, ...props }) => (
+            <div className="overflow-x-auto">
+                <table {...props}>{processedSearch ? processTextNode(nodeChildren) : nodeChildren}</table>
+            </div>
+        );
+
         return components;
-    }, [processedSearch, createComponentRenderer]);
+    }, [processedSearch, createComponentRenderer, processTextNode]);
 
     return (
         <div className={`prose prose-sm dark:prose-invert max-w-none ${className || ''}`}>