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:

1. 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.

2. 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 NavList component relies on a ResizeObserver that 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), the ResizeObserver doesn't fire, so handleScrollButtons() is never called to update scroll button visibility.

How

Added a (debounced) window resize event listener alongside the existing ResizeObserver:

Changes in NavList.tsx:

1. Import debounce utility - Used to prevent excessive calls during rapid window resize
2. Add handleWindowResize property - Stores the debounced handler for cleanup
3. Enhanced componentDidMount() - Creates debounced resize handler and adds window listener
4. Enhanced componentWillUnmount() - Properly removes the window listener to prevent memory leaks

Approach

The fix implements dual monitoring:

• ResizeObserver: Provides immediate response when the container itself changes
• Window resize listener: Catches cases where window resize doesn't trigger container resize
• Debouncing (250ms): Prevents performance issues from rapid resize events

Manual Testing Steps

To verify the fix on the horizontal nav demo:

1. Test scroll buttons appear on shrink:

   • Load the demo on a wide screen where scroll buttons don't show
   • Shrink the window until nav items overflow
   • ✅ Scroll buttons should now appear automatically

2. Test scroll buttons disappear on expand:

   • Load the demo on a narrow screen where scroll buttons show
   • Expand the window until all nav items fit
   • ✅ Scroll buttons should now disappear automatically

🤖 Generated with Claude Code