From dc6b6463691ecdfc1ed9d9ca0d6e825e6c51199d Mon Sep 17 00:00:00 2001
From: Serhiy Khvashchuk <serhiy.khvashchuk@gmail.com>
Date: Tue, 3 Nov 2026 17:57:34 +0100
Subject: [PATCH] fix(toggle): keep the track width when the toggle is
 full-width

With className="w-full" and a long hint, the flex row squeezed the
ToggleBase track (sm 36px became about 25px). Add shrink-0 to the track,
the same way Checkbox and Radio bases already do, and add a "Toggles full
width" story that shows long and short hints side by side.
---
 components/base/toggle/toggle.demo.tsx  | 19 +++++++++++++++++++
 components/base/toggle/toggle.story.tsx |  3 +++
 components/base/toggle/toggle.tsx       |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/components/base/toggle/toggle.demo.tsx b/components/base/toggle/toggle.demo.tsx
index ad2a00b..02b7789 100644
--- a/components/base/toggle/toggle.demo.tsx
+++ b/components/base/toggle/toggle.demo.tsx
@@ -74,3 +74,22 @@ export const ToggleSlimBase = () => (
         </div>
     </div>
 );
+
+export const TogglesFullWidth = () => (
+    <div className="flex w-full max-w-lg flex-col gap-4">
+        <Toggle
+            label="Remember me"
+            hint="Save my login details for next time, so you can skip this step on this device until you sign out or clear your browser data."
+            size="sm"
+            className="w-full"
+        />
+        <Toggle label="Remember me" hint="Save my login details for next time." size="sm" className="w-full" />
+        <Toggle
+            label="Remember me"
+            hint="Save my login details for next time, so you can skip this step on this device until you sign out or clear your browser data."
+            size="md"
+            className="w-full"
+        />
+        <Toggle label="Remember me" hint="Save my login details for next time." size="md" className="w-full" />
+    </div>
+);
diff --git a/components/base/toggle/toggle.story.tsx b/components/base/toggle/toggle.story.tsx
index b4546fd..00c84df 100644
--- a/components/base/toggle/toggle.story.tsx
+++ b/components/base/toggle/toggle.story.tsx
@@ -21,3 +21,6 @@ TogglesSlim.storyName = "Toggles slim";
 
 export const ToggleSlimBase = () => <ToggleComponents.ToggleSlimBase />;
 ToggleSlimBase.storyName = "Toggle slim base";
+
+export const TogglesFullWidth = () => <ToggleComponents.TogglesFullWidth />;
+TogglesFullWidth.storyName = "Toggles full width";
diff --git a/components/base/toggle/toggle.tsx b/components/base/toggle/toggle.tsx
index ad8eda6..5e30f19 100644
--- a/components/base/toggle/toggle.tsx
+++ b/components/base/toggle/toggle.tsx
@@ -51,7 +51,7 @@ export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, i
     return (
         <div
             className={cx(
-                "cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
+                "shrink-0 cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
                 isSelected && "bg-brand-solid",
                 isSelected && isHovered && "bg-brand-solid_hover",
                 isDisabled && "cursor-not-allowed opacity-50",