fix(Nav): ensure scroll buttons respond to window resize in horizontal nav #12132
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.
What
Closes #12047 - This PR fixes horizontal navigation scroll buttons not appearing/disappearing when the browser window is resized.
Problem Description
When using horizontal navigation, the scroll buttons (left/right arrows) were not responding to window resize events. This caused two issues:
Shrinking the window: When the window becomes narrow enough that nav items overflow, the scroll buttons don't appear until the user manually scrolls or focuses a nav item.
Expanding the window: When the window becomes wide enough that all nav items fit, the scroll buttons don't disappear until the user clicks on them.
Root Cause
The
NavListcomponent relies on aResizeObserverthat only monitors the nav list container element itself. When the browser window resizes but the container's dimensions don't change (common in flex/grid layouts), theResizeObserverdoesn't fire, sohandleScrollButtons()is never called to update scroll button visibility.How
Added a (debounced) window resize event listener alongside the existing
ResizeObserver:Changes in
NavList.tsx:handleWindowResizeproperty - Stores the debounced handler for cleanupcomponentDidMount()- Creates debounced resize handler and adds window listenercomponentWillUnmount()- Properly removes the window listener to prevent memory leaksApproach
The fix implements dual monitoring:
Manual Testing Steps
To verify the fix on the horizontal nav demo:
Test scroll buttons appear on shrink:
Test scroll buttons disappear on expand:
🤖 Generated with Claude Code