From 928bb3eae04dc131de5c12bac13addddbe9be642 Mon Sep 17 00:00:00 2001
From: ChangeHow <23733347+ChangeHow@users.noreply.github.com>
Date: Tue, 8 Sep 2026 01:26:43 +0800
Subject: [PATCH] fix(chat): shrink markdown table wrappers to column widths
 (#3377)

---
 .../components/chat/MarkdownRendererImpl.performance.test.tsx  | 3 +++
 packages/ui/src/components/chat/markdown/decorate.ts           | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.performance.test.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.performance.test.tsx
index dae0a10d..285cdebe 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.performance.test.tsx
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.performance.test.tsx
@@ -383,6 +383,9 @@ describe('MarkdownRenderer DOM mount performance contract', () => {
       expect(table?.classList.contains('min-w-full')).toBe(false);
       expect(table?.classList.contains('w-full')).toBe(false);
       expect(table?.parentElement?.classList.contains('overflow-x-auto')).toBe(true);
+      const wrapper = table?.closest('[data-markdown="table-wrapper"]');
+      expect(wrapper?.classList.contains('w-fit')).toBe(true);
+      expect(wrapper?.classList.contains('max-w-full')).toBe(true);
       expect(cells.length).toBeGreaterThan(0);
       expect(cells.every((cell) => cell.classList.contains('min-w-[120px]'))).toBe(true);
       expect(cells.every((cell) => cell.classList.contains('max-w-[320px]'))).toBe(true);
diff --git a/packages/ui/src/components/chat/markdown/decorate.ts b/packages/ui/src/components/chat/markdown/decorate.ts
index bcfe02d0..56ea8b69 100644
--- a/packages/ui/src/components/chat/markdown/decorate.ts
+++ b/packages/ui/src/components/chat/markdown/decorate.ts
@@ -344,7 +344,7 @@ const decorateTables = (root: HTMLElement, labels: DecorateLabels): void => {
     if (existing) continue;
 
     const wrapper = document.createElement('div');
-    wrapper.className = 'group my-4 flex flex-col space-y-2';
+    wrapper.className = 'group my-4 flex w-fit max-w-full flex-col space-y-2';
     wrapper.setAttribute('data-markdown', 'table-wrapper');
 
     const toolbar = document.createElement('div');