Commit 7b01804
fix(Nav): ensure scroll buttons respond to window resize in horizontal nav
Fixes #12047
## Problem
Horizontal navigation scroll buttons (left/right arrows) were not
appearing or disappearing when the browser window was resized. This
occurred because the ResizeObserver only monitored the nav list
container element itself, not the window. When the window resized
but the container's dimensions didn't change (due to flex/grid
layouts), the ResizeObserver wouldn't fire and scroll button
visibility wasn't updated.
## Root Cause
In NavList.tsx, the component relied solely on a ResizeObserver
watching the nav list container. In scenarios where the window
resizes but the container size remains stable (common with
responsive layouts), the observer doesn't detect the change, so
handleScrollButtons() is never called to update scroll button state.
## Solution
Added a debounced window resize event listener alongside the existing
ResizeObserver to ensure scroll buttons update in all resize scenarios:
- ResizeObserver: Provides immediate response when container changes
- Window resize listener: Catches cases where window resize doesn't
trigger container resize events
- Debouncing (250ms): Prevents performance issues from rapid resize
events
The fix maintains backward compatibility and doesn't affect any
existing functionality (manual scrolling, keyboard navigation, etc.).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>1 parent 3fe4262 commit 7b01804
File tree
1 file changed
+9
-1
lines changed1 file changed
+9
-1
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
4 | 4 | | |
5 | 5 | | |
6 | 6 | | |
7 | | - | |
| 7 | + | |
8 | 8 | | |
9 | 9 | | |
10 | 10 | | |
| |||
38 | 38 | | |
39 | 39 | | |
40 | 40 | | |
| 41 | + | |
41 | 42 | | |
42 | 43 | | |
43 | 44 | | |
| |||
108 | 109 | | |
109 | 110 | | |
110 | 111 | | |
| 112 | + | |
| 113 | + | |
| 114 | + | |
| 115 | + | |
111 | 116 | | |
112 | 117 | | |
113 | 118 | | |
114 | 119 | | |
115 | 120 | | |
| 121 | + | |
| 122 | + | |
| 123 | + | |
116 | 124 | | |
117 | 125 | | |
118 | 126 | | |
| |||
0 commit comments