[fix] st.exception links overflow at small widths by sfc-gh-lwilby · Pull Request #14417 · streamlit/streamlit

sfc-gh-lwilby · 2026-03-19T07:14:10Z

Describe your changes

st.exception footer links (Copy, Ask Google, Ask ChatGPT) overflow their container at narrow widths because the flex container lacks wrapping.

Add flexWrap: "wrap" to StyledExceptionLinks so links wrap to new lines when space is tight
Remove invalid underline: true CSS property (not a valid CSS value; had no effect)
Add dedicated E2E test for link wrapping at narrow widths (250px), verifying all three footer links remain visible
Update existing st_exception-fixed_width snapshots (taller due to wrapped links)

Fixes #12870

Screenshot or video (only for visual changes)

Desktop (narrow column) — links wrap gracefully:

Mobile (375px):

GitHub Issue Link (if applicable)

#12870

Testing Plan

Unit Tests (JS and/or Python)
E2E Tests
Any manual testing needed?

Existing ExceptionElement unit tests pass (13/13). Added a dedicated E2E test (st_exception-narrow_width_link_wrap) that renders an exception at 250px width and asserts all footer links (Copy, Ask Google, Ask ChatGPT) remain visible when they wrap. Updated st_exception-fixed_width snapshots to reflect the corrected wrapped-links rendering.

Contribution License Agreement

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

Add flexWrap to StyledExceptionLinks so links wrap instead of overflowing when the container is narrow. Fixes #12870 Made-with: Cursor Co-authored-by: lawilby <[email protected]>

snyk-io · 2026-03-19T07:14:19Z

✅ 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 · 2026-03-19T07:14:23Z

✅ PR preview is ready!

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

xr843

LGTM! Clean fix — flexWrap: "wrap" is exactly the right approach for handling narrow container widths. Good catch also removing the unused underline: true property (it's not a valid CSS/Emotion property on a div anyway).

One minor note: the existing e2e test for fixed_width (200px) should now capture the wrapped link state in its snapshot, which will serve as regression coverage for this fix.

Delete stale fixed_width snapshots (height changed due to flexWrap) and add a dedicated 250px-width test that verifies footer links (Copy, Ask Google, Ask ChatGPT) remain visible when they wrap. Made-with: Cursor Co-authored-by: lawilby <[email protected]>

Copilot

Pull request overview

Fixes st.exception footer links (Copy / Ask Google / Ask ChatGPT) overflowing at narrow widths by allowing the link row to wrap, and updates E2E coverage/snapshots to validate the narrow-width rendering (Issue #12870).

Changes:

Add flexWrap: "wrap" to the exception footer link container and remove an invalid CSS property.
Add a new narrow-width st.exception scenario in the E2E app.
Extend the st_exception Playwright test with an additional snapshot + visibility assertions and update expected element counts/snapshots.

Reviewed changes

Copilot reviewed 3 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/lib/src/components/elements/ExceptionElement/styled-components.ts	Enables wrapping for exception footer links and removes invalid CSS.
e2e_playwright/st_exception.py	Adds a narrow-width `st.exception` example used by E2E snapshots.
e2e_playwright/st_exception_test.py	Adds a new snapshot assertion for narrow-width link wrapping and updates indices/counts.
e2e_playwright/snapshots/linux/st_exception_test/st_exception-fixed_width[light_theme-webkit].png	Snapshot update for fixed-width exception rendering.
e2e_playwright/snapshots/linux/st_exception_test/st_exception-fixed_width[light_theme-firefox].png	Snapshot update for fixed-width exception rendering.
e2e_playwright/snapshots/linux/st_exception_test/st_exception-fixed_width[light_theme-chromium].png	Snapshot update for fixed-width exception rendering.
e2e_playwright/snapshots/linux/st_exception_test/st_exception-fixed_width[dark_theme-webkit].png	Snapshot update for fixed-width exception rendering.
e2e_playwright/snapshots/linux/st_exception_test/st_exception-fixed_width[dark_theme-firefox].png	Snapshot update for fixed-width exception rendering.
e2e_playwright/snapshots/linux/st_exception_test/st_exception-fixed_width[dark_theme-chromium].png	Snapshot update for fixed-width exception rendering.

Copilot · 2026-03-20T17:03:51Z

e2e_playwright/st_exception_test.py

+    narrow_exception = themed_app.get_by_test_id("stException").nth(5)
+    assert_snapshot(narrow_exception, name="st_exception-narrow_width_link_wrap")
+    expect(narrow_exception.get_by_role("button", name="Copy")).to_be_visible()
+    expect(narrow_exception.get_by_role("link", name="Ask Google")).to_be_visible()


The new assert_snapshot(..., name="st_exception-narrow_width_link_wrap") introduces a new snapshot name, but the corresponding baseline images are not present under e2e_playwright/__snapshots__/linux/st_exception_test/. With the current assert_snapshot fixture, missing baselines are written and then the test fails at the end, so CI will fail until the expected snapshots for this new name are committed.

Resolved — the baseline snapshots for both st_exception-narrow_width_link_wrap and the updated st_exception-fixed_width were committed in b102a40 via make update-snapshots.

Copilot · 2026-03-20T17:03:51Z

e2e_playwright/st_exception_test.py

+    # Verify that footer links wrap and remain visible at narrow widths (#12870)
+    narrow_exception = themed_app.get_by_test_id("stException").nth(5)
+    assert_snapshot(narrow_exception, name="st_exception-narrow_width_link_wrap")


The PR description/testing plan says no new E2E test is needed and only mentions unit tests, but this PR adds/updates Playwright E2E coverage (new app scenario + new snapshot assertion). Please update the PR description/testing plan to reflect the actual test changes so reviewers/CI expectations are clear.

Good catch — updated the PR description to reflect the E2E test additions.

Copilot · 2026-03-20T17:03:52Z

e2e_playwright/st_exception_test.py

+    # Verify that footer links wrap and remain visible at narrow widths (#12870)
+    narrow_exception = themed_app.get_by_test_id("stException").nth(5)
+    assert_snapshot(narrow_exception, name="st_exception-narrow_width_link_wrap")


Using get_by_test_id("stException").nth(5) makes this test brittle: adding/removing exceptions in st_exception.py forces re-numbering indices and updating the expected count. Consider wrapping the narrow-width exception in st.container(key=...) (or similar) and locating it via get_element_by_key(...) instead of relying on nth(...).

This is consistent with how the existing test locates all other exceptions in this file (nth(0) through nth(4) for basic, long_message, with_markdown, fixed_width, stretch_width). Changing just the new one to use get_element_by_key would be inconsistent. A refactor of all locators in this test would be a separate improvement.

Regenerate fixed_width snapshots (taller due to flexWrap) and add new narrow_width_link_wrap snapshots via make update-snapshots. Made-with: Cursor Co-authored-by: lawilby <[email protected]>

Fix st.exception link overflow at small widths

9c60062

Add flexWrap to StyledExceptionLinks so links wrap instead of overflowing when the container is narrow. Fixes #12870 Made-with: Cursor Co-authored-by: lawilby <[email protected]>

sfc-gh-lwilby added change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Mar 19, 2026

xr843 mentioned this pull request Mar 19, 2026

Fix st.exception links overflow at small widths #14347

Closed

2 tasks

xr843 approved these changes Mar 19, 2026

View reviewed changes

sfc-gh-lwilby marked this pull request as ready for review March 20, 2026 16:58

Copilot AI review requested due to automatic review settings March 20, 2026 16:58

Copilot started reviewing on behalf of sfc-gh-lwilby March 20, 2026 16:59 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

Update E2E snapshots for st.exception link wrapping fix

b102a40

Regenerate fixed_width snapshots (taller due to flexWrap) and add new narrow_width_link_wrap snapshots via make update-snapshots. Made-with: Cursor Co-authored-by: lawilby <[email protected]>

sfc-gh-bnisco approved these changes Mar 20, 2026

View reviewed changes

sfc-gh-lwilby merged commit a4bf026 into develop Mar 23, 2026
43 checks passed

sfc-gh-lwilby deleted the fix/gh-12870 branch March 23, 2026 14:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] st.exception links overflow at small widths#14417

[fix] st.exception links overflow at small widths#14417
sfc-gh-lwilby merged 3 commits intodevelopfrom
fix/gh-12870

sfc-gh-lwilby commented Mar 19, 2026 •

edited

Loading

Uh oh!

snyk-io bot commented Mar 19, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 19, 2026 •

edited

Loading

Uh oh!

xr843 left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

sfc-gh-lwilby Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

sfc-gh-lwilby Mar 20, 2026

Uh oh!

Copilot AI Mar 20, 2026

Uh oh!

sfc-gh-lwilby Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

sfc-gh-lwilby commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Screenshot or video (only for visual changes)

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

github-actions bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

xr843 left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

sfc-gh-lwilby Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

sfc-gh-lwilby Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

sfc-gh-lwilby Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sfc-gh-lwilby commented Mar 19, 2026 •

edited

Loading

snyk-io bot commented Mar 19, 2026 •

edited

Loading

github-actions bot commented Mar 19, 2026 •

edited

Loading