diff --git a/webview-ui/src/components/common/MarkdownBlock.tsx b/webview-ui/src/components/common/MarkdownBlock.tsx index 47c61a5ce02..1b9f3bf3b40 100644 --- a/webview-ui/src/components/common/MarkdownBlock.tsx +++ b/webview-ui/src/components/common/MarkdownBlock.tsx @@ -166,11 +166,8 @@ const StyledMarkdown = styled.div` /* Table styles for remark-gfm */ table { border-collapse: collapse; - margin: 1em 0; width: auto; min-width: 50%; - max-width: 100%; - table-layout: fixed; } /* Table wrapper for horizontal scrolling */ @@ -184,8 +181,7 @@ const StyledMarkdown = styled.div` border: 1px solid var(--vscode-panel-border); padding: 8px 12px; text-align: left; - word-wrap: break-word; - overflow-wrap: break-word; + white-space: nowrap; } th { diff --git a/webview-ui/src/components/common/__tests__/MarkdownBlock.spec.tsx b/webview-ui/src/components/common/__tests__/MarkdownBlock.spec.tsx index 8e41eefa14a..0f20e1d40ea 100644 --- a/webview-ui/src/components/common/__tests__/MarkdownBlock.spec.tsx +++ b/webview-ui/src/components/common/__tests__/MarkdownBlock.spec.tsx @@ -88,6 +88,28 @@ describe("MarkdownBlock", () => { expect(screen.getByText("Step three")).toBeInTheDocument() }) + it("should render tables inside a scrollable wrapper", async () => { + const markdown = `| Column A | Column B | Column C | +| --- | --- | --- | +| Data 1 | Data 2 | Data 3 |` + + const { container } = render() + + await screen.findByText("Column A") + + // Table should be wrapped in a .table-wrapper div for horizontal scrolling + const wrapper = container.querySelector(".table-wrapper") + expect(wrapper).toBeInTheDocument() + + const table = wrapper?.querySelector("table") + expect(table).toBeInTheDocument() + + // Verify table content renders correctly + expect(screen.getByText("Column B")).toBeInTheDocument() + expect(screen.getByText("Data 1")).toBeInTheDocument() + expect(screen.getByText("Data 3")).toBeInTheDocument() + }) + it("should render nested lists with proper hierarchy", async () => { const markdown = `Complex list: 1. First level ordered