From 5084621f436aa44e9f61dea932d256c9d79688e3 Mon Sep 17 00:00:00 2001
From: "Ash (Bug Lab)" <ash@openclaw-lab>
Date: Tue, 3 Mar 2026 00:42:36 +0530
Subject: [PATCH] fix(ui): ensure GFM tables render in WebChat markdown
 (#20410)

- Pass gfm:true + breaks:true explicitly to marked.parse() so table
  support is guaranteed even if global setOptions() is bypassed or
  reset by a future refactor (defense-in-depth)
- Add display:block + overflow-x:auto to .chat-text table so wide
  multi-column tables scroll horizontally instead of being clipped
  by the parent overflow-x:hidden chat container
- Add regression tests for GFM table rendering in markdown.test.ts
---
 ui/src/styles/components.css |  3 +++
 ui/src/ui/markdown.test.ts   | 34 ++++++++++++++++++++++++++++++++++
 ui/src/ui/markdown.ts        |  2 ++
 3 files changed, 39 insertions(+)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index d6b87c4d770..c7a6a425dc7 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -1923,7 +1923,10 @@
   margin-top: 0.75em;
   border-collapse: collapse;
   width: 100%;
+  max-width: 100%;
   font-size: 13px;
+  display: block;
+  overflow-x: auto;
 }
 
 .chat-text :where(th, td) {
diff --git a/ui/src/ui/markdown.test.ts b/ui/src/ui/markdown.test.ts
index 9b486f1bec1..c9084a6c305 100644
--- a/ui/src/ui/markdown.test.ts
+++ b/ui/src/ui/markdown.test.ts
@@ -48,4 +48,38 @@ describe("toSanitizedMarkdownHtml", () => {
     expect(html).not.toContain("javascript:");
     expect(html).not.toContain("src=");
   });
+
+  it("renders GFM markdown tables (#20410)", () => {
+    const md = [
+      "| Feature | Status |",
+      "|---------|--------|",
+      "| Tables  | ✅     |",
+      "| Borders | ✅     |",
+    ].join("\n");
+    const html = toSanitizedMarkdownHtml(md);
+    expect(html).toContain("<table");
+    expect(html).toContain("<thead");
+    expect(html).toContain("<th>");
+    expect(html).toContain("Feature");
+    expect(html).toContain("Tables");
+    expect(html).not.toContain("|---------|");
+  });
+
+  it("renders GFM tables surrounded by text (#20410)", () => {
+    const md = [
+      "Text before.",
+      "",
+      "| Col1 | Col2 |",
+      "|------|------|",
+      "| A    | B    |",
+      "",
+      "Text after.",
+    ].join("\n");
+    const html = toSanitizedMarkdownHtml(md);
+    expect(html).toContain("<table");
+    expect(html).toContain("Col1");
+    expect(html).toContain("Col2");
+    // Pipes from table delimiters must not appear as raw text
+    expect(html).not.toContain("|------|");
+  });
 });
diff --git a/ui/src/ui/markdown.ts b/ui/src/ui/markdown.ts
index 1867b0eda46..9996e3c8a93 100644
--- a/ui/src/ui/markdown.ts
+++ b/ui/src/ui/markdown.ts
@@ -117,6 +117,8 @@ export function toSanitizedMarkdownHtml(markdown: string): string {
   }
   const rendered = marked.parse(`${truncated.text}${suffix}`, {
     renderer: htmlEscapeRenderer,
+    gfm: true,
+    breaks: true,
   }) as string;
   const sanitized = DOMPurify.sanitize(rendered, sanitizeOptions);
   if (input.length <= MARKDOWN_CACHE_MAX_CHARS) {