Skip to content

Fix long-words overflowing markdown container#12370

Merged
lukasmasuch merged 3 commits intodevelopfrom
fix/long-words-overflowing-markdown-container
Aug 29, 2025
Merged

Fix long-words overflowing markdown container#12370
lukasmasuch merged 3 commits intodevelopfrom
fix/long-words-overflowing-markdown-container

Conversation

@lukasmasuch
Copy link
Copy Markdown
Collaborator

@lukasmasuch lukasmasuch commented Aug 29, 2025

Describe your changes

Prevents long words - longer than the available container width - from overflowing the container boundaries.

Before:

image

After:

image

GitHub Issue Link (if applicable)

Testing Plan

  • Added e2e test.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@snyk-io
Copy link
Copy Markdown
Contributor

snyk-io bot commented Aug 29, 2025

🎉 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)

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 29, 2025

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-12370/streamlit-1.49.0-py3-none-any.whl
🕹️ Preview app pr-12370.streamlit.app (☁️ Deploy here if not accessible)

@lukasmasuch lukasmasuch added security-assessment-completed change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Aug 29, 2025
@lukasmasuch lukasmasuch requested a review from Copilot August 29, 2025 11:30
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@lukasmasuch lukasmasuch marked this pull request as ready for review August 29, 2025 11:38
Comment on lines +184 to +185
// Break long words to prevent them from overflowing the container:
overflowWrap: "break-word",
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider including whiteSpace: "pre-wrap", to maintain existing white space. We take this approach in CodeBlock when we need to wrap lines.

Copy link
Copy Markdown
Collaborator

@sfc-gh-lmasuch sfc-gh-lmasuch Aug 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@lukasmasuch lukasmasuch merged commit 806681d into develop Aug 29, 2025
39 of 40 checks passed
@lukasmasuch lukasmasuch deleted the fix/long-words-overflowing-markdown-container branch August 29, 2025 16:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:bugfix PR contains bug fix implementation impact:users PR changes affect end users

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Markdown overflows in st.container

4 participants