[kinqsradio]

Fixes #8299.

The ref-scrolling example stops demonstrating horizontal scrolling between 935px and 1023px viewport widths: its container grows wide enough to fit all three cat images, so every button leaves the horizontal scroll position at zero. At 1024px the sidebar appears, narrows the example, and makes scrolling visible again.

Cap the example's container at 400px and center it. It still shrinks on smaller screens, while retaining horizontal overflow on wider screens. The ref handlers and shared Sandpack styles are unchanged.

Validation:

• Reproduced the original issue on an unchanged local checkout at 935px, 960px, and 1023px.
• Verified Neo → Millie → Bella → Neo after the fix at 320, 390, 768, 934, 935, 960, 1023, 1024, 1280, 1440, and 1920px CSS viewport widths (44 button checks). Every target reached the expected scroll position.
• At 960px, the available horizontal scroll range changes from 0 to 367px; Millie scrolls to 244px and Bella to 367px.
• Verified Enter-key activation on Millie.
• Verified Neo → Millie → Bella → Neo at 960px on the deployed PR preview: scroll positions are 0 → 244 → 367 → 0px.
• yarn check-all, yarn ci-check, and git diff --check pass. The existing Next.js image-lint warnings remain.

Browser verification used Chromium on the local Next.js development server, with the repository's standard remote Sandpack bundler and image URLs. Firefox and Safari were not tested.

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌