fix(checkbox): prevent unwanted vertical scroll from CheckboxBubbleInput positioning #3766
+2
−0
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes unwanted vertical scroll caused by CheckboxBubbleInput positioning in
@radix-ui/react-checkbox.The absolutely positioned bubble input was missing explicit
top: 0andleft: 0CSS properties, causing it to extend beyond the trigger button boundaries in certain layouts and trigger unwanted page scroll.Problem
Without
top: 0, left: 0, the input's default positioning +transform: translateX(-100%)could push it outside the button container vertically, creating vertical overflow and scrollbars.Solution
Added explicit positioning to ensure the input stays perfectly aligned within the trigger button bounds:
Changes
top: 0, left: 0to CheckboxBubbleInput inline stylesTesting
Verified checkbox behavior in Storybook (
pnpm dev)Ran package tests (
pnpm test)Confirmed accessibility (keyboard navigation, screen reader states) unchanged
📝 Use a meaningful title for the pull request and include the name of the package modified.
✅ Add or edit tests to reflect the change (run
pnpm test).🔍 Add or edit Storybook examples to reflect the change (run
pnpm dev).🙏 Please review your own PR to check for anything you may have missed.
Demo
Before (vertical scroll on narrow/tall containers):

After (no scroll, perfect alignment):
