fix: allow markdown tables to scroll horizontally instead of compressing

Author: roomote

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 {

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(<MarkdownBlock markdown={markdown} />)
+
+		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