From a49e2f21c353ee62b8b5e91ea05553612b5bb3e7 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 21 Aug 2026 09:11:49 +0000
Subject: [PATCH 1/2] feat(webapp): squish the toggle switch thumb while it's
 held down

Shorten every switch variant's track by 2px, and stretch the thumb into an
oval towards the direction it's about to travel while the switch is held down.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../app/components/primitives/Switch.tsx      | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
index 99c8e4043b9..0d2aa2db26a 100644
--- a/apps/webapp/app/components/primitives/Switch.tsx
+++ b/apps/webapp/app/components/primitives/Switch.tsx
@@ -8,16 +8,22 @@ import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKey
 const small = {
   container:
     "flex items-center h-6 gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 hover:disabled:bg-background-raised transition focus-custom disabled:opacity-50 text-text-dimmed hover:text-text-bright disabled:hover:cursor-not-allowed hover:cursor-pointer disabled:hover:text-rose-500",
-  root: "h-3 w-6",
-  thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
+  root: "h-3 w-5.5",
+  thumb: cn(
+    "h-2.5 w-2.5 data-[state=checked]:translate-x-2 data-[state=unchecked]:translate-x-0",
+    "group-active:w-3.25 group-active:data-[state=checked]:translate-x-1.25"
+  ),
   text: "text-xs text-text-dimmed",
 };
 
 const variations = {
   large: {
     container: "flex items-center gap-x-2 rounded-md hover:bg-tertiary p-2 transition focus-custom",
-    root: "h-6 w-11",
-    thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+    root: "h-6 w-10.5",
+    thumb: cn(
+      "h-5 w-5 data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0",
+      "group-active:w-6.5 group-active:data-[state=checked]:translate-x-3"
+    ),
     text: "text-sm text-text-dimmed",
   },
   small,
@@ -48,8 +54,11 @@ const variations = {
   medium: {
     container:
       "flex items-center gap-x-2 rounded-md hover:bg-tertiary py-1.5 px-2 transition focus-custom",
-    root: "h-4 w-8",
-    thumb: "size-3.5 data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0",
+    root: "h-4 w-7.5",
+    thumb: cn(
+      "h-3.5 w-3.5 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0",
+      "group-active:w-4.5 group-active:data-[state=checked]:translate-x-2"
+    ),
     text: "text-sm text-text-dimmed",
   },
 };
@@ -93,10 +102,16 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
           root
         )}
       >
+        {/*
+          The `group-active:` classes in `thumb` stretch it into an oval while the switch is held
+          down. An unchecked thumb is flush with the left of the track, so extra width grows it
+          rightwards on its own; a checked thumb gives back the same amount of translation to stay
+          pinned right and grow leftwards instead.
+        */}
         <SwitchPrimitives.Thumb
           className={cn(
             thumb,
-            "pointer-events-none block rounded-full bg-white transition dark:bg-charcoal-200 dark:group-data-[state=checked]:bg-text-bright"
+            "pointer-events-none block rounded-full bg-white transition-[translate,width,background-color] dark:bg-charcoal-200 dark:group-data-[state=checked]:bg-text-bright"
           )}
         />
       </div>

From dcda5ffe9555fea945a0e9651cef83a54f77631f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 21 Aug 2026 09:15:59 +0000
Subject: [PATCH 2/2] chore(webapp): drop the comment from the Switch thumb

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/webapp/app/components/primitives/Switch.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
index 0d2aa2db26a..eed7799fea5 100644
--- a/apps/webapp/app/components/primitives/Switch.tsx
+++ b/apps/webapp/app/components/primitives/Switch.tsx
@@ -102,12 +102,6 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
           root
         )}
       >
-        {/*
-          The `group-active:` classes in `thumb` stretch it into an oval while the switch is held
-          down. An unchecked thumb is flush with the left of the track, so extra width grows it
-          rightwards on its own; a checked thumb gives back the same amount of translation to stay
-          pinned right and grow leftwards instead.
-        */}
         <SwitchPrimitives.Thumb
           className={cn(
             thumb,