Contain markdown tables in chat transcripts

apps/web/src/components/ChatMarkdown.tsx

@@ -720,6 +720,13 @@ function ChatMarkdown({
         }
         return <img {...props} src={restoredSrc} alt={alt} loading="lazy" />;
       },
+      table({ node: _node, children, ...props }) {
+        return (
+          <div className="chat-markdown-table-scroll">
+            <table {...props}>{children}</table>
+          </div>
+        );
+      },
     }),
     [cwd, diffThemeName, isStreaming, onImageExpand],
   );

apps/web/src/components/chat/ChatTranscriptPane.browser.tsx

@@ -29,6 +29,13 @@ const TIMELINE_ENTRIES = [
     },
   },
 ];
+const DIFF_TABLE_MESSAGE = [
+  "Here are the repository changes:",
+  "",
+  "| File | Status | Notes |",
+  "| --- | --- | --- |",
+  "| `apps/web/src/components/chat/MessagesTimeline.browser-regression-with-a-very-long-file-name.tsx` | Modified | Rendered at completion after the assistant summarizes the diff changes. |",
+].join("\n");
 
 function TranscriptPerfHarness(props: { onTranscriptRender: () => void }) {
   const [composerValue, setComposerValue] = useState("");
@@ -159,6 +166,78 @@ describe("ChatTranscriptPane", () => {
     }
   });
 
+  it("contains completed markdown diff tables within the transcript row", async () => {
+    const screen = await render(
+      <ChatTranscriptPane
+        activeThreadId="thread-diff-table"
+        activeTurnInProgress={false}
+        activeTurnStartedAt={null}
+        chatFontSizePx={15}
+        completionDividerBeforeEntryId={null}
+        completionSummary={null}
+        emptyStateProjectName={undefined}
+        hasMessages
+        isRevertingCheckpoint={false}
+        isWorking={false}
+        followLiveOutput
+        listRef={{ current: null }}
+        markdownCwd={undefined}
+        onExpandTimelineImage={NOOP}
+        onMessagesClickCapture={NOOP}
+        onMessagesMouseUp={NOOP}
+        onMessagesPointerCancel={NOOP}
+        onMessagesPointerDown={NOOP}
+        onMessagesPointerUp={NOOP}
+        onMessagesScroll={NOOP}
+        onMessagesTouchEnd={NOOP}
+        onMessagesTouchMove={NOOP}
+        onMessagesTouchStart={NOOP}
+        onMessagesWheel={NOOP}
+        onIsAtEndChange={NOOP}
+        onOpenTurnDiff={NOOP}
+        onOpenThread={NOOP}
+        onRevertUserMessage={NOOP}
+        onScrollToBottom={NOOP}
+        resolvedTheme="dark"
+        revertTurnCountByUserMessageId={EMPTY_REVERT_COUNTS}
+        scrollButtonVisible={false}
+        terminalWorkspaceTerminalTabActive={false}
+        timelineEntries={[
+          {
+            id: "assistant-diff-table-entry",
+            kind: "message",
+            createdAt: "2026-03-17T19:12:28.000Z",
+            message: {
+              id: MessageId.makeUnsafe("assistant-message-diff-table"),
+              role: "assistant",
+              text: DIFF_TABLE_MESSAGE,
+              createdAt: "2026-03-17T19:12:28.000Z",
+              completedAt: "2026-03-17T19:12:29.000Z",
+              streaming: false,
+            },
+          },
+        ]}
+        timestampFormat="locale"
+        turnDiffSummaryByAssistantMessageId={EMPTY_TURN_DIFFS}
+        workspaceRoot={undefined}
+      />,
+    );
+
+    try {
+      await vi.waitFor(() => {
+        expect(page.getByText("repository changes")).toBeVisible();
+      });
+
+      const tableScroll = screen.container.querySelector<HTMLElement>(
+        ".chat-markdown-table-scroll",
+      );
+      expect(tableScroll).not.toBeNull();
+      expect(tableScroll!.querySelector("table")).not.toBeNull();
+    } finally {
+      await screen.unmount();
+    }
+  });
+
   it("expands collapsed user messages from the Show more control", async () => {
     const hiddenTail = "TAIL_SHOULD_APPEAR_AFTER_EXPAND";
     const longUserText = `${"a".repeat(COLLAPSED_USER_MESSAGE_MAX_CHARS)}${hiddenTail}`;

apps/web/src/index.css

@@ -459,6 +459,7 @@ label:has(> select#reasoning-effort) select {
 .chat-markdown ol,
 .chat-markdown blockquote,
 .chat-markdown pre,
+.chat-markdown-table-scroll,
 .chat-markdown table {
   margin: 0.65rem 0;
 }
@@ -925,6 +926,16 @@ label:has(> select#reasoning-effort) select {
   border-collapse: collapse;
 }
 
+.chat-markdown-table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+.chat-markdown-table-scroll > table {
+  min-width: 100%;
+}
+
 .chat-markdown th,
 .chat-markdown td {
   border: 1px solid var(--border);