Position of switch issue

[jwoertink]

Love the look of this! Just saw this example on the demo site using Firefox 108 on Linux Pop!_OS 22.

You can see the button looks like it's hanging outside a little. Super minor, so not really a big deal, but I figured I'd report it anymore.

Thanks!

[DevMaxC]

Can confirm i also get a similar issue on chrome, my button is off center to the top, and whats weirder is that it changes how central it is with user zoom.

90% Zoom

100% Zoom

[shadcn]

@jwoertink @DevMaxC Are you both on Linux?

[lucaspessivaldo]

I got this issue as well, I'm on Linux. but this occurs on some screens sizes, If I change the zoom or the screen size.

I solve that by putting the items-center on in this part of switch.tsx ui component.

 <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex items-center h-[24px] w-[44px] shrink-0 ....",
      className
    )}
    {...props}
    ref={ref}
  >

[shadcn]

@lucaspessivaldo Thanks for the update.

@jwoertink @DevMaxC does adding items-center fix the issue for you as well? Can you confirm?

If yes, I'll make the change. @lucaspessivaldo Happy to accept a PR as well.

[lucaspessivaldo]

To me it's all right after that, I'll do the PR

[jwoertink]

Yeah, adding items-center seems to fix it :+1: