fix(web): align switch thumb

Author: pallyoung

packages/web/src/components/ui/switch/index.module.css

@@ -28,6 +28,7 @@
   display: block;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   border-radius: var(--radius-full);
   background: var(--bg-hover);
   border: 1px solid var(--border);
@@ -55,20 +56,23 @@
 
 .thumb {
   position: absolute;
-  top: var(--switch-thumb-offset);
+  top: 50%;
   left: var(--switch-thumb-offset);
   width: var(--switch-thumb-size);
   height: var(--switch-thumb-size);
+  box-sizing: border-box;
   border-radius: 50%;
   background: var(--text-primary);
   box-shadow: var(--shadow-sm);
+  transform: translate3d(0, -50%, 0);
   transition:
     transform var(--duration-fast) var(--ease-out),
     background var(--duration-fast) var(--ease-out);
 }
 
 .checked .thumb {
-  transform: translateX(var(--switch-thumb-translate-x));
+  left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-offset));
+  transform: translate3d(0, -50%, 0);
 }
 
 .switch:disabled .track,

packages/web/src/components/ui/switch/index.tsx

@@ -22,22 +22,19 @@ const sizeMap: Record<
     readonly trackHeight: string;
     readonly thumbSize: string;
     readonly offset: string;
-    readonly translateX: string;
   }
 > = {
   sm: {
     trackWidth: "32px",
     trackHeight: "18px",
     thumbSize: "14px",
     offset: "2px",
-    translateX: "14px",
   },
   md: {
     trackWidth: "36px",
     trackHeight: "20px",
     thumbSize: "16px",
     offset: "2px",
-    translateX: "16px",
   },
 };
 
@@ -73,7 +70,6 @@ export function Switch({
           "--switch-track-height": dimensions.trackHeight,
           "--switch-thumb-size": dimensions.thumbSize,
           "--switch-thumb-offset": dimensions.offset,
-          "--switch-thumb-translate-x": dimensions.translateX,
           ...style,
         } as CSSProperties
       }