Skip to content

Fix shortcuts modal scrolling: constrain scroll to content area and preserve header scroll behavior#12254

Open
isabelladesi wants to merge 1 commit intoopenstreetmap:developfrom
isabelladesi:fix-overlay-scrollbar-height
Open

Fix shortcuts modal scrolling: constrain scroll to content area and preserve header scroll behavior#12254
isabelladesi wants to merge 1 commit intoopenstreetmap:developfrom
isabelladesi:fix-overlay-scrollbar-height

Conversation

@isabelladesi
Copy link
Copy Markdown

Closes #10591

This change fixes the scrollbar behavior in the Keyboard Shortcuts modal. Previously, the scrollbar extended into the header area because scrolling was applied to the entire modal content container. This caused the header to appear visually inconsistent and not remain fixed during scrolling.

This fix:

  • Restricts scrolling to the content wrapper instead of the full modal container
  • Keeps the header fixed at the top of the modal
  • Prevents the scrollbar from overlapping the header

Additionally, this change preserves expected scrolling behavior by forwarding wheel events from the header to the scrollable content area. This ensures users can still scroll the modal even when hovering over the header.

Testing

  • Resized the browser window to force overflow
  • Verified scrollbar is limited to the content area
  • Verified header remains fixed during scroll
  • Verified scrolling works when hovering over both content and header

No regressions observed in the test suite (npm test passed).

… header fixed, and forward scroll events from header
@mxdanger
Copy link
Copy Markdown

mxdanger commented May 3, 2026

How would you say this differs from #10612 and what makes this approach better?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Limit scrollbar height in overlays

2 participants