fix(webview-ui): break long unbroken text in markdown table cells - #2651
fix(webview-ui): break long unbroken text in markdown table cells#2651C0d3N1nja97342 wants to merge 2 commits into
Conversation
Markdown tables with long continuous text (URLs, base64, tokens) stretched the table past the chat container, creating a global horizontal scrollbar. The table wrapper has overflow-x-auto but the cells had no word-breaking, so long unbroken runs expanded the column indefinitely. Add break-all to td/th so the text wraps inside the cell. Fixes MoonshotAI#2560
🦋 Changeset detectedLatest commit: 634b66f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e33ea78ba2
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| td: ({ children }) => <td className="border border-border px-2 py-1">{enrich(children)}</td>, | ||
| th: ({ children }) => <th className="border border-border bg-muted px-2 py-1 text-left font-medium">{enrich(children)}</th>, | ||
| td: ({ children }) => <td className="border border-border px-2 py-1 break-all">{enrich(children)}</td>, | ||
| th: ({ children }) => <th className="border border-border bg-muted px-2 py-1 text-left font-medium break-all">{children}</th>, |
There was a problem hiding this comment.
When a markdown table header contains a detected local path or color literal and enableEnrichment is on, this now bypasses enrich, so headers no longer get clickable file links or color swatches even though body cells still do. This looks accidental while adding break-all; keep {enrich(children)} in the th just like td.
Useful? React with 👍 / 👎.
|
@codex review |
|
Codex Review: Didn't find any major issues. Can't wait for the next one! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
1 participant
Related Issue
Resolve #2560
Problem
Markdown tables rendered in the Web UI lack width constraints for long unbroken text (URLs, base64 strings, tokens). The table wrapper has
overflow-x-autobut the cells (td/th) had no word-breaking, so long unbroken runs expanded the column indefinitely, stretching the table past the chat container and creating a global horizontal scrollbar.Solution
Add Tailwind's
break-all(word-break: break-all) to bothtdandthelements in the markdown renderer. This forces long unbroken text to wrap inside the cell, keeping the table within the container width. Theoverflow-x-autowrapper still handles wide multi-column tables by scrolling horizontally.Verification
overflow-x-autowrapperChecklist