Fix long-words overflowing markdown container#12370
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes an overflow issue where long words in markdown content would extend beyond their container boundaries. The change adds CSS word wrapping behavior to ensure text stays within the designated container width.
Key Changes
- Adds
overflowWrap: "break-word"CSS property to the main markdown container styling
| // Break long words to prevent them from overflowing the container: | ||
| overflowWrap: "break-word", |
There was a problem hiding this comment.
suggestion: Consider including whiteSpace: "pre-wrap", to maintain existing white space. We take this approach in CodeBlock when we need to wrap lines.
There was a problem hiding this comment.
this sounds reasonable, but I double-checked with two models in Cursor and they seem to suggest otherwise. I will probably try it in another PR and see if our test run through.
I reviewed our Markdown container styles and how CodeBlock handles wrapping.
- Yes for CodeBlock/inline code: using whiteSpace: "pre-wrap" makes sense where we intentionally preserve whitespace.
- Not for general Markdown container: applying whiteSpace: "pre-wrap" on StyledStreamlitMarkdown would inherit into p, li, td, etc., preserving sequences of spaces and single newlines. That changes standard Markdown rendering (which normally collapses whitespace) and risks layout regressions. For the long-word overflow fix, overflowWrap: "break-word" at the container plus existing p: { wordBreak: "break-word" } already addresses the issue without changing whitespace semantics.
Answer: It makes sense in code contexts (which we already do), but adding whiteSpace: "pre-wrap" globally to Markdown would likely break existing behavior. I recommend keeping the current change as-is.
Another model:
Do not add whiteSpace: "pre-wrap" globally. We already preserve whitespace where intended (inline code, <pre>). If you need even more aggressive breaking of long tokens, consider overflowWrap: "anywhere" instead of changing whitespace behavior.
Describe your changes
Prevents long words - longer than the available container width - from overflowing the container boundaries.
Before:
After:
GitHub Issue Link (if applicable)
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.