🤖 fix: prevent Switch from becoming circular on mobile (#1164)

Author: ThomasK33

src/browser/components/ui/switch.tsx

@@ -30,19 +30,25 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         disabled={disabled}
         onClick={() => onCheckedChange(!checked)}
         className={cn(
-          "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+          "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          checked ? "bg-accent" : "bg-zinc-600",
           className
         )}
       >
         <span
           className={cn(
-            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
-            checked ? "translate-x-5" : "translate-x-0"
+            "pointer-events-none inline-flex h-6 w-11 items-center rounded-full border-2 border-transparent transition-colors",
+            checked ? "bg-accent" : "bg-zinc-600"
           )}
-        />
+        >
+          <span
+            className={cn(
+              "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+              checked ? "translate-x-5" : "translate-x-0"
+            )}
+          />
+        </span>
       </button>
     );
   }