[fix] Resolving some regressions introduced via top nav #11732

sfc-gh-nbellante · 2025-06-23T16:08:50Z

Describe your changes

Two main changes/bugs were fixed:

There was a race condition when apps were deployed such that window.innerWidth was coming back as 0, satisfying the < breakpoints.md condition. This was remedied with useLayoutEffect. This fixes Sidebar unexpectedly initializes collapsed in fullscreen app #11710.
CSS unhappiness where it was growing until its maxWidth. This was fixed by adding a minWidth: 0 to the appropriate spot. I also cleaned up some styles while touching those components. This fixes Main content no longer resizes on sidebar expand/collapse #11702

When I was creating an exhaustive test suite (st_main_layout_test.py) I realized there was actually another bug present. There was a missing case in the logic to account for the EXPANDED state for initial_sidebar_state. I then discovered that there already existed this helper in utils, with a lovely switch case that handled all of these. So I utilized that and this is now resolved.

GitHub Issue Link (if applicable)

Closes #11702
Closes #11710

Testing Plan

I added e2e tests separate from the sidebar tests that focus specifically on the main layout of the app including the initial sidebar state, and various viewports, and uses snapshots to ensure content is not overflowing off the page as was shown in #11702. I think there's opportunity to better consolidate these tests, but this seems sufficient for now.

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 · 2025-06-23T16:09:06Z

✅ PR preview is ready!

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

snyk-io · 2025-06-23T16:09:56Z

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

…icated logic neglected expanded state as the failing tests indicate so addressing that here (hopefully)

…ut the logic we realllly care about here is on load, so im going to add this app.reload into here to check the thing i actually mean to check

…Introduced helper functions for viewport setup, sidebar state verification, and content visibility checks. Updated tests to use parameterization for different sidebar states and viewport sizes, enhancing maintainability and clarity.

Copilot

Pull Request Overview

This PR fixes several UI regressions in the top navigation and main layout, addressing a race condition with window.innerWidth and a CSS overflow issue by adjusting layout styles and sidebar collapse logic. Key changes include:

Updating StyledMainContent to use theme-based sizing and adding a minimum width while removing flex properties.
Refactoring AppView’s sidebar collapse logic to use useLayoutEffect, useRef, and the shouldCollapse helper to resolve the window.innerWidth race condition.
Adding comprehensive end-to-end tests for various sidebar states and responsive behaviors.

Reviewed Changes

Copilot reviewed 5 out of 53 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
frontend/app/src/components/AppView/styled-components.ts	Updated layout styles with theme.sizes.full and minWidth; removed flex styling.
frontend/app/src/components/AppView/AppView.tsx	Refactored sidebar collapse logic to mitigate race condition issues.
e2e_playwright/st_main_layout_test.py	Added E2E tests covering sidebar responsiveness and interaction.
e2e_playwright/st_main_layout.py	Introduced test app script with varied sidebar configuration.
e2e_playwright/conftest.py	Updated app server startup logic to use a helper function.

Comments suppressed due to low confidence (1)

frontend/app/src/components/AppView/styled-components.ts:221

The removal of the flex layout properties from StyledMainContent may impact the positioning of child elements. Please confirm that this change is intentional and that the layout still behaves as expected across all viewports.

  height: "100vh",

frontend/app/src/components/AppView/AppView.tsx

lukasmasuch · 2025-06-24T19:37:58Z

e2e_playwright/st_main_layout_test.py

+    sidebar_header = app.get_by_test_id("stSidebarHeader")
+    sidebar_header.hover()
+
+    collapse_button = app.get_by_test_id("stSidebarCollapseButton").locator("button")
+    collapse_button.click()


nit: I think it might be preventing some flakiness to always do and expect(collapse_button).to_be_visible() before performing actions like click / hover. But not 100% sure if that's actually the case.
`

lukasmasuch

LGTM 👍

## Describe your changes Two main changes/bugs were fixed: 1. There was a race condition when apps were deployed such that window.innerWidth was coming back as 0, satisfying the `< breakpoints.md` condition. This was remedied with `useLayoutEffect`. This fixes #11710. 2. CSS unhappiness where it was growing until its `maxWidth`. This was fixed by adding a `minWidth: 0` to the appropriate spot. I also cleaned up some styles while touching those components. This fixes #11702 When I was creating an exhaustive test suite (`st_main_layout_test.py`) I realized there was actually another bug present. There was a missing case in the logic to account for the `EXPANDED` state for `initial_sidebar_state`. I then discovered that there already existed this helper in utils, with a lovely switch case that handled all of these. So I utilized that and this is now resolved. ## GitHub Issue Link (if applicable) Closes #11702 Closes #11710 ## Testing Plan I added e2e tests separate from the sidebar tests that focus specifically on the main layout of the app including the initial sidebar state, and various viewports, and uses snapshots to ensure content is not overflowing off the page as was shown in #11702. I think there's opportunity to better consolidate these tests, but this seems sufficient for now. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license. --------- Co-authored-by: Bob Nisco <[email protected]>

sfc-gh-nbellante changed the title ~~adding console.logs~~ [WIP] Resolving some regressions introduced via top nav Jun 23, 2025

sfc-gh-nbellante 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 Jun 24, 2025

sfc-gh-nbellante added 17 commits June 23, 2025 23:18

adding console.logs

2cc857b

pushing some changes

699208c

testing some fixes

26f0120

more robust fix

502200b

try running in CI

516760f

updating snaps

9a5dcc0

simplifying

c8a123a

updating snaps

e014037

condensing tests a bit

cce404d

let's try this

14422bb

updating snaps?

55d30a1

reuse existing logic because i didn't know about it, but also my dupl…

14992b2

…icated logic neglected expanded state as the failing tests indicate so addressing that here (hopefully)

for some reason, when shrinking the viewport, it hides the sidebar, b…

7bc50ec

…ut the logic we realllly care about here is on load, so im going to add this app.reload into here to check the thing i actually mean to check

adding the snapshots for the last failing test now that its working

05e611f

i think this should work

9ef4247

new screenshot names

97a5cdc

sfc-gh-nbellante force-pushed the nico/bugfix-11710 branch from 5559b83 to 97a5cdc Compare June 24, 2025 06:19

sfc-gh-nbellante added 6 commits June 23, 2025 23:46

clearing snapshots

d5928a5

Update snapshots

03c7e16

actually fixing the fixtures

eae07ed

clear snaps

7d182a5

updating snaps (for hopefully the last time)

007570e

deleting snaps and updating test to be simpler because was flaking

426c6c1

sfc-gh-nbellante and others added 5 commits June 24, 2025 08:27

snaps

0b87fdc

Update st_main_layout_test.py

1db7ad2

Wait for info box to appear before snapshotting

5e9e87a

Update snapshots

f484b5c

DRY AsyncSubprocess code

bb2e1c4

sfc-gh-bnisco requested a review from Copilot June 24, 2025 18:11

Copilot AI reviewed Jun 24, 2025

View reviewed changes

frontend/app/src/components/AppView/AppView.tsx Show resolved Hide resolved

sfc-gh-bnisco changed the title ~~[WIP] Resolving some regressions introduced via top nav~~ [fix] Resolving some regressions introduced via top nav Jun 24, 2025

sfc-gh-bnisco marked this pull request as ready for review June 24, 2025 18:14

lukasmasuch reviewed Jun 24, 2025

View reviewed changes

lukasmasuch approved these changes Jun 24, 2025

View reviewed changes

sfc-gh-nbellante merged commit 9a78421 into develop Jun 25, 2025
37 checks passed

sfc-gh-nbellante deleted the nico/bugfix-11710 branch June 25, 2025 16:52

sfc-gh-nbellante mentioned this pull request Jun 27, 2025

Main content no longer resizes on sidebar expand/collapse #11702

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] Resolving some regressions introduced via top nav #11732

[fix] Resolving some regressions introduced via top nav #11732

Uh oh!

sfc-gh-nbellante commented Jun 23, 2025 •

edited by lukasmasuch

Loading

Uh oh!

github-actions bot commented Jun 23, 2025 •

edited

Loading

Uh oh!

snyk-io bot commented Jun 23, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

lukasmasuch Jun 24, 2025

Uh oh!

lukasmasuch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[fix] Resolving some regressions introduced via top nav #11732

[fix] Resolving some regressions introduced via top nav #11732

Uh oh!

Conversation

sfc-gh-nbellante commented Jun 23, 2025 • edited by lukasmasuch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

github-actions bot commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

snyk-io bot commented Jun 23, 2025 • 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

lukasmasuch Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sfc-gh-nbellante commented Jun 23, 2025 •

edited by lukasmasuch

Loading

github-actions bot commented Jun 23, 2025 •

edited

Loading

snyk-io bot commented Jun 23, 2025 •

edited

Loading