Skip to content

[fix] Clip chart overflow in narrow columns#15505

Draft
sfc-gh-lwilby-1 wants to merge 3 commits into
developfrom
cursor/chart-overflow-in-columns-23b3
Draft

[fix] Clip chart overflow in narrow columns#15505
sfc-gh-lwilby-1 wants to merge 3 commits into
developfrom
cursor/chart-overflow-in-columns-23b3

Conversation

@sfc-gh-lwilby-1

@sfc-gh-lwilby-1 sfc-gh-lwilby-1 commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Describe your changes

Vega-Lite/Altair charts that size via autosize: pad (facet charts and nested compositions like vconcat + hconcat) render an SVG whose total width is driven by the plotting area plus axes, facet panels, and padding. Vega-Lite's width only controls the plotting area, so the rendered SVG can be wider than its wrapper. In a narrow st.columns cell the chart then spilled out of its column/card and overlapped neighboring elements.

Clip the rendered chart to the wrapper bounds (max-width: 100% + overflow: hidden) only for these pad-sized charts. Simple fit/fit-x charts already match the wrapper exactly, so they are left untouched — clipping them would crop edge axis labels and is unnecessary.

  • Clipping is gated on isFacet || hasNestedComp, the same conditions the backend uses to choose autosize: pad.
  • The chart action menu is a sibling of .chart-wrapper, so it is not affected by the clip.

Screenshot or video (only for visual changes)

Faceted line charts inside cards in narrow columns.

Before (charts overflow and overlap neighboring cards):

Screenshot 2026-06-10 at 6 58 45 PM

Before fix - facet charts overflow narrow columns

After (charts are clipped to their card bounds):

Screenshot 2026-06-10 at 6 59 16 PM

After fix - facet charts clipped to card bounds

GitHub Issue Link (if applicable)

N/A

Testing Plan

  • E2E Tests: existing st_vega_lite_chart_test.py and st_vega_charts_height_test.py pass unchanged. In st_vega_charts_width_test.py the facet/nested charts share a page with simple charts; clipping the faceted charts produces an imperceptible (~1.8%) sub-pixel shift of the sibling simple charts on that page, so the four affected width snapshots (width_content[chromium], width_content/width_stretch/width_400px[firefox]) were regenerated. Local Linux rendering reproduced CI's pixel diffs exactly; webkit/chromium-stretch/400px were unaffected.
  • Frontend unit tests: existing ArrowVegaLiteChart suite passes (127 tests).
  • Manual testing: verified with Playwright screenshots at 1280px and 760px viewports that faceted charts no longer overflow narrow columns while simple charts and full-width charts are unaffected.

Contribution License Agreement

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

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

@snyk-io

snyk-io Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions

github-actions Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-15505/streamlit-1.58.0-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-15505.streamlit.app (☁️ Deploy here if not accessible)

@sfc-gh-lwilby-1 sfc-gh-lwilby-1 added change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Jun 10, 2026
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.

2 participants