fix: allow markdown tables to scroll horizontally instead of compressing

[roomote-v0]

Related GitHub Issue

Closes: #12026

Description

This PR attempts to address Issue #12026. Feedback and guidance are welcome.

The root cause is that markdown tables in the chat view were forced to compress within the chat window width due to table-layout: fixed and max-width: 100% CSS rules, combined with word-wrap: break-word on cells. This made tables unreadable in narrow chat panels.

Changes in MarkdownBlock.tsx:

1. Removed table-layout: fixed from the table style -- this was forcing equal-width columns and preventing the table from sizing naturally based on content
2. Removed max-width: 100% from the table style -- lets the table grow beyond the container width when content requires it
3. Removed margin from the table style since .table-wrapper already provides it
4. Changed word-wrap: break-word / overflow-wrap: break-word on th/td to white-space: nowrap -- prevents cell content from wrapping so cells size to their content
5. The existing .table-wrapper with overflow-x: auto now correctly provides the horizontal scrollbar when the table content is wider than the chat window

Test addition:

Added a test to verify that tables render inside a .table-wrapper div for horizontal scrolling.

Test Procedure

• Ran cd webview-ui && npx vitest run src/components/common/__tests__/MarkdownBlock.spec.tsx -- all 5 tests pass (4 existing + 1 new)
• To manually verify: open a narrow chat panel and ask the model to produce a wide markdown table. The table should now show a horizontal scrollbar instead of compressing columns.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue.
• Scope: Changes are focused on the linked issue.
• Self-Review: Performed a thorough self-review.
• Testing: Added a new test for table wrapper rendering.
• Documentation Impact: No documentation updates required.
• Contribution Guidelines: Read and agree to the Contributor Guidelines.

Screenshots / Videos

N/A -- CSS-only change, reviewers can verify by rendering a wide markdown table in a narrow chat panel.

Documentation Updates

No documentation updates are required.

Additional Notes

This is a minimal, targeted CSS fix. When a table fits within the chat width, it behaves as before. When it is too wide, a horizontal scrollbar appears -- matching the behavior described in the issue (similar to Cursor).

Interactively review PR in Roo Code Cloud