Skip to content

[fix] Fullscreen behaviour for st.image with use_container_width=True or width="stretch"#12235

Merged
sfc-gh-lwilby merged 3 commits intodevelopfrom
fix/image-with-width-stretch-use-container-width-fullscreen
Aug 22, 2025
Merged

[fix] Fullscreen behaviour for st.image with use_container_width=True or width="stretch"#12235
sfc-gh-lwilby merged 3 commits intodevelopfrom
fix/image-with-width-stretch-use-container-width-fullscreen

Conversation

@sfc-gh-lwilby
Copy link
Copy Markdown
Collaborator

Describe your changes

When an image has width="stretch" or use_container_width=True, then it should expand in full screen mode, filling the screen as much as it can while still maintaining its proportions.

GitHub Issue Link (if applicable)

Testing Plan

  • E2E Tests ✅

Contribution License Agreement

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 15, 2025

✅ PR preview is ready!

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

@snyk-io
Copy link
Copy Markdown
Contributor

snyk-io bot commented Aug 15, 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)

@sfc-gh-lwilby sfc-gh-lwilby added security-assessment-completed change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Aug 15, 2025
@sfc-gh-lwilby sfc-gh-lwilby marked this pull request as ready for review August 16, 2025 07:12
@lukasmasuch lukasmasuch requested a review from Copilot August 18, 2025 20:47
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 the fullscreen behavior for st.image components that use width="stretch" or use_container_width=True. Previously, images with these width configurations would not properly expand to fill the available screen space when viewed in fullscreen mode.

  • Adds shouldStretch prop to styled components to control width behavior in fullscreen mode
  • Updates the Image component to pass through the stretch configuration
  • Adds E2E test coverage for fullscreen behavior with stretched images

Reviewed Changes

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

File Description
frontend/lib/src/components/elements/ImageList/styled-components.ts Adds shouldStretch prop to control width and flex-grow behavior for stretched images
frontend/lib/src/components/elements/ImageList/ImageList.tsx Implements logic to determine when images should stretch and passes the prop through components
e2e_playwright/st_image_test.py Adds test case for fullscreen behavior with width='stretch' images

@sfc-gh-lwilby sfc-gh-lwilby merged commit 2ead150 into develop Aug 22, 2025
37 checks passed
@sfc-gh-lwilby sfc-gh-lwilby deleted the fix/image-with-width-stretch-use-container-width-fullscreen branch August 22, 2025 17:54
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.

3 participants