From 06ca9b9521f4641a9a31b9a53c1053e31d7d982f Mon Sep 17 00:00:00 2001
From: naman-bruno <naman@usebruno.com>
Date: Mon, 6 Jul 2026 23:13:51 +0530
Subject: [PATCH] refactor(AI): update ToggleSwitch size to 'xs' (#8500)

---
 .../src/components/Preferences/AI/AutocompletePane.js     | 2 +-
 .../src/components/Preferences/AI/SecurityPane.js         | 8 ++++----
 packages/bruno-app/src/components/Preferences/AI/index.js | 6 +++---
 .../src/components/RequestPane/AppCodeEditor/index.js     | 2 +-
 .../src/components/ToggleSwitch/StyledWrapper.js          | 2 ++
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/bruno-app/src/components/Preferences/AI/AutocompletePane.js b/packages/bruno-app/src/components/Preferences/AI/AutocompletePane.js
index 766878f37..3e599b34a 100644
--- a/packages/bruno-app/src/components/Preferences/AI/AutocompletePane.js
+++ b/packages/bruno-app/src/components/Preferences/AI/AutocompletePane.js
@@ -75,7 +75,7 @@ const AutocompletePane = ({
             </span>
           </div>
           <ToggleSwitch
-            size="m"
+            size="xs"
             isOn={enabled}
             handleToggle={() => onToggleEnabled(!enabled)}
             data-testid="ai-autocomplete-enabled-toggle"
diff --git a/packages/bruno-app/src/components/Preferences/AI/SecurityPane.js b/packages/bruno-app/src/components/Preferences/AI/SecurityPane.js
index 3dd967a87..b2363b413 100644
--- a/packages/bruno-app/src/components/Preferences/AI/SecurityPane.js
+++ b/packages/bruno-app/src/components/Preferences/AI/SecurityPane.js
@@ -148,7 +148,7 @@ const SecurityPane = ({
             </span>
           </div>
           <ToggleSwitch
-            size="m"
+            size="xs"
             isOn={redactHeaders}
             handleToggle={() => onToggleRedactHeaders(!redactHeaders)}
             data-testid="ai-security-headers-toggle"
@@ -163,7 +163,7 @@ const SecurityPane = ({
             </span>
           </div>
           <ToggleSwitch
-            size="m"
+            size="xs"
             isOn={redactBody}
             handleToggle={() => onToggleRedactBody(!redactBody)}
             data-testid="ai-security-body-toggle"
@@ -178,7 +178,7 @@ const SecurityPane = ({
             </span>
           </div>
           <ToggleSwitch
-            size="m"
+            size="xs"
             isOn={redactResponse}
             handleToggle={() => onToggleRedactResponse(!redactResponse)}
             data-testid="ai-security-response-toggle"
@@ -193,7 +193,7 @@ const SecurityPane = ({
             </span>
           </div>
           <ToggleSwitch
-            size="m"
+            size="xs"
             isOn={redactVariables}
             handleToggle={() => onToggleRedactVariables(!redactVariables)}
             data-testid="ai-security-variables-toggle"
diff --git a/packages/bruno-app/src/components/Preferences/AI/index.js b/packages/bruno-app/src/components/Preferences/AI/index.js
index d82c92b1f..377567261 100644
--- a/packages/bruno-app/src/components/Preferences/AI/index.js
+++ b/packages/bruno-app/src/components/Preferences/AI/index.js
@@ -344,7 +344,7 @@ const AI = () => {
               </div>
             </div>
             <ToggleSwitch
-              size="m"
+              size="xs"
               isOn={formik.values.enabled}
               handleToggle={() => formik.setFieldValue('enabled', !formik.values.enabled)}
             />
@@ -370,7 +370,7 @@ const AI = () => {
 
                     const providerToggle = (
                       <ToggleSwitch
-                        size="s"
+                        size="xs"
                         isOn={providerEnabled}
                         handleToggle={() =>
                           formik.setFieldValue(`providers.${id}.enabled`, !providerEnabled)}
@@ -426,7 +426,7 @@ const AI = () => {
 
                     const providerToggle = (
                       <ToggleSwitch
-                        size="s"
+                        size="xs"
                         isOn={providerEnabled}
                         handleToggle={() =>
                           formik.setFieldValue(`providers.${providerId}.enabled`, !providerEnabled)}
diff --git a/packages/bruno-app/src/components/RequestPane/AppCodeEditor/index.js b/packages/bruno-app/src/components/RequestPane/AppCodeEditor/index.js
index 1161e0f1e..b8b70addd 100644
--- a/packages/bruno-app/src/components/RequestPane/AppCodeEditor/index.js
+++ b/packages/bruno-app/src/components/RequestPane/AppCodeEditor/index.js
@@ -40,7 +40,7 @@ const AppCodeEditor = ({ item, collection }) => {
             When enabled, replaces the request/response panes with the app view for this request.
           </p>
         </div>
-        <ToggleSwitch isOn={enabled} handleToggle={onToggle} size="m" data-testid="app-enable-toggle" />
+        <ToggleSwitch isOn={enabled} handleToggle={onToggle} size="xs" data-testid="app-enable-toggle" />
       </div>
 
       <div className="flex-1 app-editor relative" data-testid="app-code-editor">
diff --git a/packages/bruno-app/src/components/ToggleSwitch/StyledWrapper.js b/packages/bruno-app/src/components/ToggleSwitch/StyledWrapper.js
index e1c7aa7f4..28738591d 100644
--- a/packages/bruno-app/src/components/ToggleSwitch/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ToggleSwitch/StyledWrapper.js
@@ -15,8 +15,10 @@ const getSizeValues = (size = 'm') => switchSizes[size] || switchSizes.m;
 export const Switch = styled.div`
   position: relative;
   display: inline-block;
+  flex-shrink: 0;
   width: ${(props) => getSizeValues(props.size).width}px;
   height: ${(props) => getSizeValues(props.size).height}px;
+  min-width: ${(props) => getSizeValues(props.size).width}px;
   border-radius: ${(props) => getSizeValues(props.size).height}px;
 `;