authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-04 17:47:20-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-04 17:47:20-04:00
log389bbcc8d9dd5c463668944f7093052301c8a850
tree70e437b1402aa42879557557d607026433efca09
parent98a29cbaa1ccf8d8afb6d35e3e1d925ff9b5fa90
signature Signed by PGP key B5690EEEBB952194

fix(web): give toggle thumbs consistent inset spacing (#9805)

1 files changed, 2 insertions(+), 2 deletions(-)

apps/web/src/components/ui/switch.tsx+2-2
...@@ -12,7 +12,7 @@ function Switch({...@@ -12,7 +12,7 @@ function Switch({
12 return (12 return (
13 <SwitchPrimitive.Root13 <SwitchPrimitive.Root
14 className={cn(14 className={cn(
15 "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 cursor-pointer items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-64",15 "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 cursor-pointer items-center rounded-full p-[2px] outline-none transition-[background-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-64",
16 size === "sm"16 size === "sm"
17 ? "[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3.5)]"17 ? "[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3.5)]"
18 : "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",18 : "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
...@@ -24,7 +24,7 @@ function Switch({...@@ -24,7 +24,7 @@ function Switch({
24 >24 >
25 <SwitchPrimitive.Thumb25 <SwitchPrimitive.Thumb
26 className={cn(26 className={cn(
27 "pointer-events-none block aspect-square h-full origin-left in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]",27 "pointer-events-none block size-[calc(var(--thumb-size)-2px)] shrink-0 origin-left in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-right data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
28 )}28 )}
29 data-slot="switch-thumb"29 data-slot="switch-thumb"
30 />30 />