Repository navigation
fix(nav): Keep the mobile top bar height when the menu is open - #130887
Merged
Merged
Conversation
The mobile menu locked scrolling on #main whenever #main existed when the menu mounted (for example after resizing into the mobile layout). Setting `overflow: hidden` on #main drops its flex min-height to 0, so inside the Seer Explorer content pane it shrinks to the pane height and the TopBar is squeezed from 49px to its 33px content height. Always lock the document body instead, which is what a fresh mobile load already did. Fixes DE-1846 Co-Authored-By: Priscila Andre de Oliveira <29228205+priscilawebdev@users.noreply.github.com>
github-actions
Bot
added
the
Scope: Frontend
Jesse-Box
approved these changes
Nov 12, 2026
This branch was successfully deployed
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.
Fixes DE-1846. Reported by @natemoo-re.
On mobile, opening the menu could squeeze the page TopBar from 49px down to 33px, which pushed the page content up.
Root cause:
MobileNavigationlocked scrolling on#mainwhen#mainalready existed at mount time (for example after you resize into the mobile layout, which is how the bug video was recorded). On a fresh mobile load it locked the body instead. When Seer Explorer is on,#mainsits inside the bounded, scrolling content pane. The lock setsoverflow: hiddenon#main, which drops its flexmin-heightto 0.#mainthen shrinks to the pane height, and its children shrink too. The TopBar has a fixed height but the defaultflex-shrink: 1, so it ends up at the height of its contents. This isn't the earlier fixed-height cleanup in #127759 coming back. The lock target is a separate cause.Fix: always lock
document.body. That's what the fresh-load path already did, and it's the element that actually scrolls when the Seer pane is off.Verified on a local devserver at 760px wide, with Seer Explorer forced on locally. Before the fix, resizing from desktop width and opening the menu gave a 33px TopBar. After the fix it stays at 49px. I checked both the resize path and a fresh load, with Seer on and off, and the scroll position is the same after closing the menu.
index.mobile.spec.tsxandtopBar.spec.tsxpass, along with lint and typecheck.Not in this PR: showing the current project in the mobile settings breadcrumb. That's still an open design decision.
via @priscilawebdev.
--
View Session [Sentry]