[BUG] Markdown Table Format not working correct

[CyberT33N]

Problem (one or two sentences)

@roomote

When Markdown tables are displayed, they are fixed to the chat window width, which makes them far too compact and small.

If I increase the chat window to full width, it gets better, but it does not work in the smaller mode.

The expected behavior would be that the table does not stretch to the width of the chat window. Instead, once it reaches a certain size, a horizontal scrollbar should be created, roughly similar to how it works in Curser.

Context (who is affected and when)

see desc

Reproduction steps

see desc

Expected result

see desc

Actual result

see desc

Variations tried (optional)

No response

App Version

Version: 3.51.1 (7c9722b)

API Provider (optional)

None

Model Used (optional)

No response

Roo Code Task Links (optional)

No response

Relevant logs or errors (optional)

[roomote-v0]

I've analyzed this issue and here's my proposed implementation plan:

The root cause is in webview-ui/src/components/common/MarkdownBlock.tsx. The table styles currently use table-layout: fixed and max-width: 100%, which force the table to compress within the chat window width. While there's already a .table-wrapper div with overflow-x: auto, the table itself never exceeds the container because of these constraints.

Proposed changes in MarkdownBlock.tsx:

1. Remove table-layout: fixed from the table style - this forces equal-width columns and prevents the table from sizing naturally based on content
2. Remove max-width: 100% from the table style - let the table grow beyond the container width when content requires it
3. Change word-wrap: break-word / overflow-wrap: break-word on th/td to white-space: nowrap - prevent cell content from wrapping so cells size to their content (the horizontal scrollbar on .table-wrapper handles overflow instead)
4. The existing .table-wrapper with overflow-x: auto will then provide the horizontal scrollbar when the table content is wider than the chat window

This approach lets tables size naturally based on their content. When a table fits within the chat width, it behaves as before. When it's too wide, a horizontal scrollbar appears - matching the behavior described in the issue (similar to Cursor).

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[CyberT33N]

@roomote

Yes I approve this plan

[roomote-v0]

Thanks for approving the plan! I'll proceed with the implementation now -- updating the table styles in MarkdownBlock.tsx to allow natural content sizing with horizontal scrollbar overflow. I'll open a PR shortly.

[roomote-v0]

Opened PR #12027 with my attempt at addressing this. The fix removes table-layout: fixed, max-width: 100%, and cell word-wrapping constraints so tables size naturally based on content, with the existing .table-wrapper providing horizontal scrolling when needed. Feedback welcome!