Fix logo pushing out collapse button#12329
Merged
lukasmasuch merged 7 commits intodevelopfrom Aug 28, 2025
Merged
Conversation
Contributor
🎉 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) |
Contributor
✅ PR preview is ready!
|
lukasmasuch
added
security-assessment-completed
change:bugfix
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a UI layout issue where the logo was pushing out the collapse button in the Streamlit sidebar. The fix ensures proper positioning and visibility of both elements.
- Added CSS
objectPosition: "left"to prevent logo overflow - Wrapped the logo component in a div container for better layout control
- Enhanced E2E tests to verify collapse button visibility alongside logo display
Reviewed Changes
Copilot reviewed 3 out of 17 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/app/src/components/Sidebar/styled-components.ts | Added objectPosition: "left" CSS property to logo styling |
| frontend/app/src/components/Logo/LogoComponent.tsx | Wrapped logo element in a div container |
| e2e_playwright/st_logo_test.py | Added hover interactions and collapse button visibility checks to all logo tests |
| // handle the width in all cases. It already gets wrapped via a | ||
| // link element (<a>) above when link is provided. | ||
| // https://github.com/streamlit/streamlit/issues/12326 | ||
| return <div>{logo}</div> |
Collaborator
There was a problem hiding this comment.
I'm not entirely sure why having this wrapped into another element works fine, but it's probably related to some specific aspect of the surrounding flex box and how max-width is applied to the image.
lukasmasuch
added a commit
that referenced
this pull request
Aug 29, 2025
## Describe your changes Fixes an issue with the logo pushing out the collapse button. This was already working fine when a link was set -> the reason is that the additional wrapping leads to a more correct calculation of the actual available width. I think this is also solvable differently with some CSS stuff, but I think its ok to just wrap the logo in a div when its not already wrapped into a `a` element. ## GitHub Issue Link (if applicable) - Closes #12326 ## Testing Plan - Updated the e2e tests to ensure that the collapse button is displayed during snapshots. The logos in the previous version where somewhat broken. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Describe your changes
Fixes an issue with the logo pushing out the collapse button. This was already working fine when a link was set -> the reason is that the additional wrapping leads to a more correct calculation of the actual available width. I think this is also solvable differently with some CSS stuff, but I think its ok to just wrap the logo in a div when its not already wrapped into a
aelement.GitHub Issue Link (if applicable)
st.logocan push minimise button outside sidebar #12326Testing 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.