diff --git a/.changeset/fix-switch-scroll-jump.md b/.changeset/fix-switch-scroll-jump.md new file mode 100644 index 00000000000..2a4710504c1 --- /dev/null +++ b/.changeset/fix-switch-scroll-jump.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Fix Chrome-specific scroll jump when toggling the billing period switch on the pricing table. diff --git a/packages/ui/src/elements/Switch.tsx b/packages/ui/src/elements/Switch.tsx index c97d423809e..53650afc543 100644 --- a/packages/ui/src/elements/Switch.tsx +++ b/packages/ui/src/elements/Switch.tsx @@ -53,6 +53,7 @@ export const Switch = forwardRef( align='center' as='label' sx={t => ({ + position: 'relative', isolation: 'isolate', width: 'fit-content', '&:has(input:focus-visible) > input + span': { @@ -73,6 +74,7 @@ export const Switch = forwardRef( aria-labelledby={ariaLabelledBy} style={{ ...common.visuallyHidden(), + inset: 0, }} />