Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[fix] Sidebar sizing issue under certain conditions #10733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
sfc-gh-bnisco merged 11 commits into from
Apr 9, 2025
Merged

[fix] Sidebar sizing issue under certain conditions #10733

sfc-gh-bnisco merged 11 commits into from
Apr 9, 2025

Conversation

@sfc-gh-bnisco
Copy link
Collaborator

@sfc-gh-bnisco sfc-gh-bnisco commented Mar 11, 2025 •
edited
Loading

Describe your changes

  • Fixes an issue where scrollbar-induced layout shift can cause visual flickering in the sidebar under certain conditions.
  • Utilizes the scrollbar-gutter CSS property to ensure that space is reserved for scrollbars, even when they are not visible, preventing layout shifts when the scrollbars appear and disappear.
    • Note that scrollbar-gutter also brings with it some visual differences since the browser now reserves space for the scrollbar. The actual amount of space will be different between browsers and OSes.
    • In order to reduce the visual impact of this, I've done my best to align the spacing to the previous visual padding/margin as shown in Chrome. Please see comments inline about this.
      • Even with this, things are going to be slightly different in Firefox/Webkit, hence a majority of snapshot diffs here
      • The remaining snapshot diffs should mostly be due to the new dimensions. Taking a snapshot of a div with scrollbar-gutter is going to be narrower than before due to the newly reserved space.
  • I believe that scrollbar-gutter is the right way to solve this given the deprecation of overflow: overlay. Using custom scrollbars to attempt to achieve overflow: overlay is worse for a11y, whereas this is the recommended browser standard.
  • Removes all other extraneous traces of overflow: overlay in code since that has been removed from browsers for the last ~3 years and functionally acts as overflow: auto. See Can I Use for docs.

GitHub Issue Link (if applicable)

Fixes #10310

Testing Plan

  • Adds a unit 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.

@sfc-gh-bnisco sfc-gh-bnisco added security-assessment-completed Security assessment has been completed for PR change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Mar 11, 2025
@snyk-io
Copy link
Contributor

snyk-io bot commented Mar 14, 2025 •
edited
Loading

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

github-actions bot commented Mar 14, 2025 •
edited
Loading

✅ PR preview is ready!

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

@sfc-gh-bnisco sfc-gh-bnisco force-pushed the bnisco/fix-10310 branch 2 times, most recently from 0b69aef to 43a60eb Compare March 28, 2025 21:42
sfc-gh-nbellante
sfc-gh-nbellante approved these changes Mar 31, 2025
View reviewed changes
Copy link
Contributor

@sfc-gh-nbellante sfc-gh-nbellante left a comment

Choose a reason for hiding this comment

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

nice!

@sfc-gh-nbellante
Copy link
Contributor

sfc-gh-nbellante commented Mar 31, 2025

oh yeah also heads up that the padding on the sidebar is changing to be smaller anyways, so i wouldn't worry too much about needing to keep it the same visually.

@sfc-gh-bnisco sfc-gh-bnisco marked this pull request as ready for review April 9, 2025 21:19
@sfc-gh-bnisco sfc-gh-bnisco merged commit a38c248 into develop Apr 9, 2025
34 checks passed
@sfc-gh-bnisco sfc-gh-bnisco deleted the bnisco/fix-10310 branch April 9, 2025 21:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sfc-gh-nbellante sfc-gh-nbellante sfc-gh-nbellante approved these changes

Assignees

No one assigned

Labels

change:bugfix PR contains bug fix implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Sidebar flickering

3 participants

@sfc-gh-bnisco @sfc-gh-nbellante