Skip to content

fix modal + drawer CLS#109385

Merged
natemoo-re merged 6 commits intomasterfrom
fix/seer-cls
Feb 26, 2026
Merged

fix modal + drawer CLS#109385
natemoo-re merged 6 commits intomasterfrom
fix/seer-cls

Conversation

@natemoo-re
Copy link
Member

Adds a new useScrollLock hook that prevents body scrolling and compensates for the layout shift that occurs when the scrollbar disappears.

See Before (layout shift) and After (no layout shift)

scroll-lock-bna.mov

Closes DE-974

@natemoo-re natemoo-re requested a review from a team February 25, 2026 22:08
@linear
Copy link

linear bot commented Feb 25, 2026

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 25, 2026
@natemoo-re natemoo-re marked this pull request as ready for review February 25, 2026 22:18
Copy link
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

natemoo-re and others added 6 commits February 26, 2026 14:59
…l open

When a drawer or modal opens, we set overflow:hidden on the body to prevent
background scroll. This removes the scrollbar, giving the page extra width
and causing a visible layout shift.

Apply scrollbar-gutter:stable alongside overflow:hidden so the browser
reserves space for the scrollbar even when it is hidden, preventing the
shift.

Fixes DE-974
Co-Authored-By: Claude <noreply@anthropic.com>
…eScrollLock

scrollbar-gutter:stable on <html> causes a persistent empty scrollbar track
on classic-scrollbar systems (Windows / macOS "Always show"), and makes
fixed-position overlays appear to jut out past the page content area.

Instead, measure the actual scrollbar width at lock-time and apply it as
padding-right on <body>. The body content stays the same width while the
scrollbar is hidden, and fixed-position overlays (which use the full
viewport) are unaffected. On overlay-scrollbar systems the measurement
is 0 so no padding is applied.

Extract the logic into a reusable useScrollLock hook so the drawer and
modal share the same implementation.

Fixes DE-974
Co-Authored-By: Claude <noreply@anthropic.com>
Moves useScrollLock utility and its test file from static/app/utils/ to static/app/components/core/ to better organize core UI utilities alongside other core components.
@natemoo-re natemoo-re merged commit db4b3e9 into master Feb 26, 2026
59 checks passed
@natemoo-re natemoo-re deleted the fix/seer-cls branch February 26, 2026 20:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants