From b59b7d0af9536a2d61ddfcf8d33420b890b2faca Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 2 Sep 2026 15:56:28 -0700
Subject: [PATCH] fix(web): unify control sizing across settings pages (#9281)

Co-authored-by: Claude Code <noreply@anthropic.com>
---
 .../BranchToolbarBranchSelector.tsx           |  2 +-
 .../web/src/components/ServerUpdateAction.tsx |  6 ++-
 .../settings/AddProviderInstanceDialog.tsx    | 13 ++---
 .../settings/ConnectionsSettings.tsx          |  9 ++--
 .../settings/DiagnosticsSettings.tsx          |  8 +--
 .../components/settings/FontFamilyPicker.tsx  |  8 ++-
 .../settings/IntegrationsSettings.tsx         | 16 ++++--
 .../settings/KeybindingsSettings.tsx          | 30 ++++++------
 .../settings/ProjectSettingsPanel.tsx         | 17 ++++---
 .../settings/ProviderInstanceCard.tsx         | 11 +++--
 .../settings/ProviderModelsSection.tsx        |  9 ++--
 .../settings/ProviderSettingsForm.tsx         |  4 +-
 .../settings/ProviderSettingsPanel.tsx        |  6 +--
 .../components/settings/SettingsPanels.tsx    | 49 +++++++++++++------
 .../settings/SharedSettingsMismatchAlert.tsx  |  2 +-
 .../settings/SourceControlSettings.tsx        | 14 ++----
 .../settings/SourceControlWritingSettings.tsx | 15 ++++--
 .../components/settings/ThemeEditorPanel.tsx  |  2 +
 .../components/settings/settingsLayout.tsx    | 14 ++++++
 apps/web/src/components/ui/switch.tsx         | 12 ++++-
 20 files changed, 154 insertions(+), 93 deletions(-)

diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
index 5fcad2f741dbf2382a7ae5b338c4f29adfade285..42b94b538086e7f541fb01b5defca3b90289322f 100644
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -850,7 +850,7 @@ export function BranchToolbarBranchSelector({
                     <Switch
                       id={startFromOriginSwitchId}
                       checked={startFromOrigin}
-                      className="[--thumb-size:--spacing(3.5)]"
+                      size="sm"
                       aria-label="Start worktree from origin"
                       onCheckedChange={(checked) => onStartFromOriginChange(Boolean(checked))}
                     />
diff --git a/apps/web/src/components/ServerUpdateAction.tsx b/apps/web/src/components/ServerUpdateAction.tsx
index 4647eb541566abf19ff07e877f4df3787c669980..71b974416dd3dbc3856bb8e21bc7195c95959da5 100644
--- a/apps/web/src/components/ServerUpdateAction.tsx
+++ b/apps/web/src/components/ServerUpdateAction.tsx
@@ -83,6 +83,7 @@ export function ServerUpdateAction({
   targetVersion,
   label = "Update",
   variant = "outline",
+  size = "xs",
 }: {
   readonly environmentId: EnvironmentId;
   readonly serverLabel: string;
@@ -95,6 +96,7 @@ export function ServerUpdateAction({
   readonly targetVersion: string;
   readonly label?: string;
   readonly variant?: ComponentProps<typeof Button>["variant"];
+  readonly size?: ComponentProps<typeof Button>["size"];
 }) {
   const isDesktopAppUpdate = selfUpdate === "desktop-managed";
   const continueThreadsAfterServerUpdate = useClientSettings(
@@ -185,14 +187,14 @@ export function ServerUpdateAction({
   if (selfUpdate === null) {
     const command = manualServerUpdateCommand(targetVersion);
     return (
-      <Button size="xs" variant={variant} onClick={() => copyToClipboard(command, { command })}>
+      <Button size={size} variant={variant} onClick={() => copyToClipboard(command, { command })}>
         Copy update command
       </Button>
     );
   }
 
   return (
-    <Button size="xs" variant={variant} onClick={() => void handleUpdate()}>
+    <Button size={size} variant={variant} onClick={() => void handleUpdate()}>
       {label}
     </Button>
   );
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index 158908b5e9428a84db3de7ce4aeef1858d319acc..9671755f8bea19e7f0ed17e7d1763a27c9bcfc1b 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -380,9 +380,9 @@ export function AddProviderInstanceDialog({
                   {accentColor ? (
                     <Button
                       type="button"
-                      size="sm"
+                      size="xs"
                       variant="ghost"
-                      className="h-7 px-2 text-xs text-muted-foreground"
+                      className="text-muted-foreground"
                       onClick={() => setAccentColor("")}
                     >
                       Clear
@@ -417,7 +417,6 @@ export function AddProviderInstanceDialog({
           <DialogFooter variant="bare">
             <Button
               variant="outline"
-              size="sm"
               onClick={() => {
                 if (wizardStep === 0) {
                   onOpenChange(false);
@@ -429,13 +428,9 @@ export function AddProviderInstanceDialog({
               {wizardStep === 0 ? "Cancel" : "Back"}
             </Button>
             {wizardStep < ADD_PROVIDER_WIZARD_STEPS.length - 1 ? (
-              <Button size="sm" onClick={() => navigateToStep(wizardStep + 1)}>
-                Next
-              </Button>
+              <Button onClick={() => navigateToStep(wizardStep + 1)}>Next</Button>
             ) : (
-              <Button size="sm" onClick={handleSave}>
-                Add instance
-              </Button>
+              <Button onClick={handleSave}>Add instance</Button>
             )}
           </DialogFooter>
         </div>
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index b33a81b7b7a46ff61be2ff7c5afd5e99c71e2fe1..b487fbb8bd19cf17cb0ef5841e6215d068d6af0d 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -785,7 +785,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
                   Done
                 </Button>
                 {canCopyToClipboard ? (
-                  <Button variant="outline" size="xs" onClick={handleCopyCode}>
+                  <Button variant="outline" onClick={handleCopyCode}>
                     Copy code
                   </Button>
                 ) : null}
@@ -2784,7 +2784,7 @@ export function ConnectionsSettings() {
             status={<span className="block text-destructive">{desktopWslError}</span>}
             control={
               <Button
-                size="xs"
+                size="sm"
                 variant="outline"
                 onClick={loadWslState}
                 disabled={isLoadingWslState}
@@ -2819,6 +2819,7 @@ export function ConnectionsSettings() {
           }
           control={
             <Button
+              size="sm"
               variant="outline"
               disabled={isUpdatingWslBackend}
               onClick={() => handleSelectWslMode(BACKEND_VALUE_WSL_OFF)}
@@ -2867,6 +2868,7 @@ export function ConnectionsSettings() {
               }}
             >
               <SelectTrigger
+                size="sm"
                 className="w-full sm:w-56"
                 aria-label="WSL backend"
                 disabled={isUpdatingWslBackend}
@@ -3062,6 +3064,7 @@ export function ConnectionsSettings() {
                   primaryEnvironmentId !== null &&
                   primaryServerUpdateState.status !== "running" ? (
                     <ServerUpdateAction
+                      size="sm"
                       environmentId={primaryEnvironmentId}
                       serverLabel={
                         primaryEnvironment ? `${primaryEnvironment.label} server` : "server"
@@ -3418,7 +3421,7 @@ export function ConnectionsSettings() {
                       <Button
                         size="xs"
                         variant="ghost"
-                        className="h-5 gap-1 rounded-sm px-1 text-[11px] font-normal text-muted-foreground/60 hover:text-muted-foreground"
+                        className="font-normal text-muted-foreground/60 hover:text-muted-foreground"
                         aria-label="Add environment"
                       >
                         <PlusIcon className="size-3" />
diff --git a/apps/web/src/components/settings/DiagnosticsSettings.tsx b/apps/web/src/components/settings/DiagnosticsSettings.tsx
index 9c36d32ff51a37f7ac09a5b10fe1f818ad452996..c8447b711f91a38e997bd2ad02cfe1379306f785 100644
--- a/apps/web/src/components/settings/DiagnosticsSettings.tsx
+++ b/apps/web/src/components/settings/DiagnosticsSettings.tsx
@@ -793,13 +793,13 @@ function DiagnosticsRefreshButton({
       <TooltipTrigger
         render={
           <Button
-            size="icon-micro"
+            size="icon-xs"
             variant="ghost-muted"
             disabled={isPending}
             onClick={onClick}
             aria-label={label}
           >
-            <RefreshCwIcon className={cn("size-3", isPending && "animate-spin")} />
+            <RefreshCwIcon className={cn(isPending && "animate-spin")} />
           </Button>
         }
       />
@@ -1129,13 +1129,13 @@ export function DiagnosticsSettingsPanel() {
               <TooltipTrigger
                 render={
                   <Button
-                    size="icon-micro"
+                    size="icon-xs"
                     variant="ghost-muted"
                     disabled={!observability?.logsDirectoryPath || isOpeningLogsDirectory}
                     onClick={openLogsDirectory}
                     aria-label="Open logs folder"
                   >
-                    <FolderOpenIcon className="size-3" />
+                    <FolderOpenIcon />
                   </Button>
                 }
               />
diff --git a/apps/web/src/components/settings/FontFamilyPicker.tsx b/apps/web/src/components/settings/FontFamilyPicker.tsx
index 6cc28567cb2e322ae14ddb81d3da90915630b5fc..3fa5087e9daedd9405005fbda1592153b865a050 100644
--- a/apps/web/src/components/settings/FontFamilyPicker.tsx
+++ b/apps/web/src/components/settings/FontFamilyPicker.tsx
@@ -11,6 +11,7 @@ import {
   ComboboxPopup,
   ComboboxTrigger,
 } from "../ui/combobox";
+import { selectTriggerVariants } from "../ui/select";
 
 const DEFAULT_FONT_VALUE = "__default__";
 
@@ -203,14 +204,11 @@ export function FontFamilyPicker({
         void listRef.current?.scrollIndexIntoView?.({ index: eventDetails.index, animated: false });
       }}
     >
-      <ComboboxTrigger
-        aria-label={ariaLabel}
-        className="relative inline-flex min-h-9 w-full min-w-36 cursor-pointer select-none items-center justify-between gap-2 rounded-lg border border-input bg-background px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 sm:min-h-8 sm:text-sm dark:bg-input/32"
-      >
+      <ComboboxTrigger aria-label={ariaLabel} className={selectTriggerVariants({ size: "sm" })}>
         <span className="min-w-0 truncate">
           {selectedFamily.length === 0 ? defaultFamily : selectedFamily}
         </span>
-        <ChevronDownIcon className="-me-1 size-3 shrink-0 text-muted-foreground opacity-50" />
+        <ChevronDownIcon className="-me-1 size-3 opacity-50" />
       </ComboboxTrigger>
       <ComboboxPopup align="end" className="flex w-72 flex-col">
         <div className="shrink-0 px-3 pt-2.5">
diff --git a/apps/web/src/components/settings/IntegrationsSettings.tsx b/apps/web/src/components/settings/IntegrationsSettings.tsx
index af08091a520ad3fd37ba12d77834cb24dac6f4e3..62a17b9368e65b9e1a32d2939f9479fb174ee71a 100644
--- a/apps/web/src/components/settings/IntegrationsSettings.tsx
+++ b/apps/web/src/components/settings/IntegrationsSettings.tsx
@@ -354,7 +354,7 @@ function BrowserZoomSetting({ disabled }: { readonly disabled: boolean }) {
             if (next !== undefined) updateSettings({ browserDefaultZoomFactor: next });
           }}
         >
-          <SelectTrigger className="w-full sm:w-40" aria-label="Default browser zoom">
+          <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Default browser zoom">
             <SelectValue>{zoomLabel(zoomFactor)}</SelectValue>
           </SelectTrigger>
           <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -396,7 +396,11 @@ function BrowserAppearanceSetting({ disabled }: { readonly disabled: boolean })
             }
           }}
         >
-          <SelectTrigger className="w-full sm:w-40" aria-label="Default browser appearance">
+          <SelectTrigger
+            size="sm"
+            className="w-full sm:w-40"
+            aria-label="Default browser appearance"
+          >
             <SelectValue>{APPEARANCE_LABELS[appearance]}</SelectValue>
           </SelectTrigger>
           <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -441,7 +445,11 @@ function BrowserRecordingFrameRateSetting({ disabled }: { readonly disabled: boo
             }
           }}
         >
-          <SelectTrigger className="w-full sm:w-40" aria-label="Browser recording frame rate">
+          <SelectTrigger
+            size="sm"
+            className="w-full sm:w-40"
+            aria-label="Browser recording frame rate"
+          >
             <SelectValue>{frameRate} fps</SelectValue>
           </SelectTrigger>
           <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -706,7 +714,7 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
                     render={
                       <span className="inline-flex" {...(!removalAvailable ? { tabIndex: 0 } : {})}>
                         <Button
-                          size="icon-sm"
+                          size="icon-xs"
                           variant="ghost-muted"
                           disabled={profileWritesDisabled || !removalAvailable}
                           aria-label={`Remove ${profile.name}`}
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index d1470a7db78839b020bdc89db62849afb2513a5a..b0beea24cc474fd0a7f80bd84cff3e5940e77855 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -131,12 +131,12 @@ function ExpandableHeaderSearch({
             render={
               <Button
                 type="button"
-                size="icon-micro"
+                size="icon-xs"
                 variant="ghost-muted"
                 onClick={() => onOpenChange(true)}
                 aria-label="Search keybindings"
               >
-                <SearchIcon className="size-3" />
+                <SearchIcon />
               </Button>
             }
           />
@@ -168,7 +168,7 @@ function ExpandableHeaderSearch({
         placeholder="Search keybindings"
         aria-label="Search keybindings"
         className="w-44 [&_[data-slot=input]]:pl-7"
-        size="compact"
+        size="sm"
       />
     </div>
   );
@@ -850,7 +850,7 @@ function KeybindingKeyControl({
     <>
       {isDirty ? (
         <Button
-          size="compact"
+          size="sm"
           disabled={isSaving || keyDraft.trim().length === 0 || !isWhenDraftValid}
           onClick={save}
         >
@@ -863,7 +863,7 @@ function KeybindingKeyControl({
           onClick={() => setDraft({ isRecording: true })}
           aria-label={`Edit shortcut for ${commandLabel(row.command)}: ${formatShortcutLabel(row.binding.shortcut)}`}
           className={cn(
-            "inline-flex h-7 cursor-pointer items-center rounded-md border border-transparent px-1.5 outline-none transition-colors hover:border-border/70 hover:bg-accent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24",
+            "inline-flex h-8 cursor-pointer items-center rounded-md border border-transparent px-1.5 sm:h-7 outline-none transition-colors hover:border-border/70 hover:bg-accent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24",
             pillClassName,
           )}
         >
@@ -876,7 +876,7 @@ function KeybindingKeyControl({
           aria-label={`Keybinding for ${commandLabel(row.command)}`}
           value={isRecording ? "" : keyDraft}
           placeholder={isRecording ? "Press shortcut" : "Unassigned"}
-          size="compact"
+          size="sm"
           className={cn("w-44 font-mono", isRecording && "border-primary/70 bg-primary/5")}
           onFocus={() => setDraft({ isRecording: true })}
           onBlur={() => setDraft({ isRecording: false })}
@@ -954,7 +954,7 @@ function KeybindingRowMenu({
             type="button"
             variant="ghost"
             size="icon-sm"
-            className="size-7 text-muted-foreground hover:text-foreground sm:size-7"
+            className="text-muted-foreground hover:text-foreground"
             disabled={isSaving}
             aria-label={`Actions for ${commandLabel(row.command)}`}
           />
@@ -1155,7 +1155,7 @@ function NewKeybindingCommandSelect({
       value={draft.commandDraft}
       onValueChange={(value) => draft.setCommandDraft(value as KeybindingCommand)}
     >
-      <SelectTrigger size="compact" className={className}>
+      <SelectTrigger size="sm" className={className}>
         <SelectValue placeholder="Command" />
       </SelectTrigger>
       <SelectContent
@@ -1189,7 +1189,7 @@ function NewKeybindingKeyInput({
       aria-label={`Keybinding for ${draft.commandLabelText}`}
       value={draft.isRecording ? "" : draft.keyDraft}
       placeholder={draft.isRecording ? "Press shortcut" : "Unassigned"}
-      size="compact"
+      size="sm"
       className={cn("font-mono", draft.isRecording && "border-primary/70 bg-primary/5", className)}
       onFocus={() => draft.setDraft({ isRecording: true })}
       onBlur={() => draft.setDraft({ isRecording: false })}
@@ -1233,7 +1233,7 @@ function NewKeybindingCancelIcon({
             type="button"
             variant="ghost"
             size="icon-sm"
-            className="size-7 text-muted-foreground hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground"
             disabled={isSaving}
             aria-label="Cancel new keybinding"
             onClick={onCancel}
@@ -1271,7 +1271,7 @@ function NewKeybindingSettingsRow(props: NewKeybindingProps) {
           />
           <KeybindingConflictWarning labels={draft.conflictLabels} />
           <NewKeybindingKeyInput draft={draft} className="w-44" />
-          <Button size="compact" disabled={isSaving || !draft.canSave} onClick={draft.save}>
+          <Button size="sm" disabled={isSaving || !draft.canSave} onClick={draft.save}>
             {isSaving ? "Saving" : "Save"}
           </Button>
           <NewKeybindingCancelIcon isSaving={isSaving} onCancel={onCancel} />
@@ -1514,12 +1514,12 @@ export function KeybindingsSettingsPanel() {
                 render={
                   <Button
                     type="button"
-                    size="icon-micro"
+                    size="icon-xs"
                     variant="ghost-muted"
                     onClick={() => setIsAddingBinding(true)}
                     aria-label="Add keybinding"
                   >
-                    <PlusIcon className="size-3" />
+                    <PlusIcon />
                   </Button>
                 }
               />
@@ -1530,13 +1530,13 @@ export function KeybindingsSettingsPanel() {
                 render={
                   <Button
                     type="button"
-                    size="icon-micro"
+                    size="icon-xs"
                     variant="ghost-muted"
                     disabled={!keybindingsConfigPath}
                     onClick={openKeybindingsFile}
                     aria-label="Open keybindings.json"
                   >
-                    <FileJsonIcon className="size-3" />
+                    <FileJsonIcon />
                   </Button>
                 }
               />
diff --git a/apps/web/src/components/settings/ProjectSettingsPanel.tsx b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
index 5d63f5fd458495f3eac1a5a26a97ef8a83d94132..1f0aba37586c7bf2941b40cf35691bbbc75e952b 100644
--- a/apps/web/src/components/settings/ProjectSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
@@ -106,6 +106,7 @@ import {
 } from "../WorkspaceBreadcrumb";
 import { WorkspacePageHeader } from "../WorkspacePageHeader";
 import {
+  SETTINGS_PICKER_TRIGGER_CLASSNAME,
   SettingResetButton,
   SettingsPageContainer,
   SettingsRow,
@@ -803,6 +804,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
             control={
               <Input
                 key={`${group.projectKey}:${group.displayName}`}
+                size="sm"
                 className="w-full sm:w-64"
                 aria-label="Project name"
                 defaultValue={group.displayName}
@@ -841,7 +843,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
                   className="size-6"
                 />
                 <Button
-                  size="xs"
+                  size="sm"
                   variant="outline"
                   type="button"
                   aria-label="Choose a project icon file"
@@ -874,7 +876,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
                     instanceEntries={instanceEntries}
                     modelOptionsByInstance={modelOptionsByInstance}
                     triggerVariant="outline"
-                    triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                    triggerClassName={SETTINGS_PICKER_TRIGGER_CLASSNAME}
                     onInstanceModelChange={(instanceId, model) => {
                       setDefaultModel(createModelSelection(instanceId, model));
                     }}
@@ -889,7 +891,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
                     allowPromptInjectedEffort={false}
                     planModeEnabled={projectSettings.planModeEnabled}
                     triggerVariant="outline"
-                    triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                    triggerClassName={SETTINGS_PICKER_TRIGGER_CLASSNAME}
                     onModelOptionsChange={(nextOptions) => {
                       setDefaultModel(
                         createModelSelection(
@@ -928,7 +930,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
                   }
                 }}
               >
-                <SelectTrigger aria-label="New-thread workspace">
+                <SelectTrigger size="sm" aria-label="New-thread workspace">
                   <SelectValue>
                     {storedEnvMode === null
                       ? group.memberProjects.length > 1
@@ -969,7 +971,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
               value={selectedCheckout.physicalProjectKey}
               onValueChange={(value) => setSelectedCheckoutKey(String(value))}
             >
-              <SelectTrigger className="max-w-64" aria-label="Selected checkout">
+              <SelectTrigger size="sm" className="max-w-64" aria-label="Selected checkout">
                 <SelectValue>{selectedCheckoutLabel}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -1034,7 +1036,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
                   }
                 }}
               >
-                <SelectTrigger aria-label={`Grouping rule for ${selectedCheckoutLabel}`}>
+                <SelectTrigger size="sm" aria-label={`Grouping rule for ${selectedCheckoutLabel}`}>
                   <SelectValue>
                     {selectedCheckoutGrouping === "inherit"
                       ? `Default (${PROJECT_GROUPING_MODE_LABELS[projectGroupingSettings.sidebarProjectGroupingMode]})`
@@ -1064,7 +1066,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
               description="Removes this checkout and its threads from the project group. Files on disk are not touched."
               control={
                 <Button
-                  size="xs"
+                  size="sm"
                   variant="destructive-outline"
                   onClick={() => void removeMembers([selectedCheckout])}
                 >
@@ -1210,6 +1212,7 @@ function ProjectDetail({ group }: { group: SidebarProjectSnapshot }) {
             }
             control={
               <Button
+                size="sm"
                 variant="destructive-outline"
                 onClick={() => void removeMembers(group.memberProjects)}
               >
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index 14cac060e10c264d6f60c9eae1abcb443755a6c1..a910d44633f52ec250581ba7df7aff16d00a17df 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -258,7 +258,7 @@ function ProviderEnvironmentSection(props: {
       {rows.map((variable, index) => (
         <div key={variable.id} className="flex min-w-0 items-center gap-1.5">
           <DraftInput
-            size="compact"
+            size="sm"
             className="w-44 shrink-0 font-mono"
             value={variable.name}
             onCommit={(name) => updateVariable(variable.id, { name: name.trim() })}
@@ -270,7 +270,7 @@ function ProviderEnvironmentSection(props: {
             =
           </span>
           <DraftInput
-            size="compact"
+            size="sm"
             className="min-w-0 flex-1 font-mono"
             value={variable.valueRedacted ? "" : variable.value}
             onCommit={(value) => updateVariable(variable.id, { value })}
@@ -679,10 +679,10 @@ export function ProviderInstanceCard({
                     render={
                       <Button
                         type="button"
-                        size="icon-xs"
+                        size="icon-micro"
                         variant="ghost"
                         className={cn(
-                          "size-5 rounded-sm p-0 [--control-icon-color:currentColor]",
+                          "[--control-icon-color:currentColor]",
                           versionAdvisory.emphasis === "strong"
                             ? "text-warning hover:text-warning"
                             : "text-muted-foreground hover:text-foreground",
@@ -748,7 +748,7 @@ export function ProviderInstanceCard({
                                   type="button"
                                   size="icon-xs"
                                   variant="ghost"
-                                  className="size-6 shrink-0 rounded-sm p-0 text-muted-foreground hover:text-foreground"
+                                  className="shrink-0 text-muted-foreground hover:text-foreground"
                                   onClick={() =>
                                     copyToClipboard(updateCommand, {
                                       providerName: displayName,
@@ -858,6 +858,7 @@ export function ProviderInstanceCard({
               <div className="flex min-w-0 flex-wrap items-center gap-3">
                 <DraftInput
                   id={`provider-instance-${instanceId}-display-name`}
+                  size="sm"
                   className="w-44"
                   value={instance.displayName ?? ""}
                   onCommit={updateDisplayName}
diff --git a/apps/web/src/components/settings/ProviderModelsSection.tsx b/apps/web/src/components/settings/ProviderModelsSection.tsx
index 375d1ca419f9ca2578c148b06f6b4ddf9da4e5e1..06c5afaec1532f5ed1b09e1af7f12b02f0d4975b 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.tsx
+++ b/apps/web/src/components/settings/ProviderModelsSection.tsx
@@ -386,7 +386,7 @@ export function ProviderModelsSection({
     <Tooltip>
       <TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
         <Switch
-          className="sm:[--thumb-size:--spacing(3.5)]"
+          size="sm"
           checked={!isHidden}
           disabled={model.isCustom}
           onCheckedChange={(checked) => setHidden(model.slug, !checked)}
@@ -463,7 +463,7 @@ export function ProviderModelsSection({
             value={filter}
             onChange={(event) => setFilter(event.target.value)}
             placeholder="Filter models"
-            size="compact"
+            size="sm"
             className="w-56"
             spellCheck={false}
             aria-label="Filter models"
@@ -509,6 +509,7 @@ export function ProviderModelsSection({
         <div className="mt-3 flex flex-col gap-2 sm:flex-row">
           <Input
             id={`provider-instance-${instanceId}-custom-model`}
+            size="sm"
             autoFocus
             value={input}
             onChange={(event) => {
@@ -529,10 +530,10 @@ export function ProviderModelsSection({
             spellCheck={false}
           />
           <div className="flex shrink-0 gap-2">
-            <Button variant="outline" onClick={handleAdd}>
+            <Button size="sm" variant="outline" onClick={handleAdd}>
               Add
             </Button>
-            <Button variant="ghost" onClick={cancelAdd}>
+            <Button size="sm" variant="ghost" onClick={cancelAdd}>
               Cancel
             </Button>
           </div>
diff --git a/apps/web/src/components/settings/ProviderSettingsForm.tsx b/apps/web/src/components/settings/ProviderSettingsForm.tsx
index 988ac9160412280f82e64692744b182bc6c4725e..02f40fd6d5c979b28593fbe6ba2e7a30dd9ed15c 100644
--- a/apps/web/src/components/settings/ProviderSettingsForm.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsForm.tsx
@@ -219,7 +219,7 @@ function ProviderSettingsFieldRow({
         )}
         <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
           {field.control === "switch" ? (
-            <span className="flex h-8 items-center">
+            <span className="flex h-8 items-center sm:h-7">
               <Switch
                 checked={readProviderConfigBoolean(value, field.key, field.defaultBooleanValue)}
                 onCheckedChange={(checked) =>
@@ -245,6 +245,7 @@ function ProviderSettingsFieldRow({
             <DraftInput
               id={inputId}
               aria-describedby={descriptionId}
+              size="sm"
               className="w-56"
               type={field.control === "password" ? "password" : undefined}
               autoComplete={field.control === "password" ? "off" : undefined}
@@ -313,6 +314,7 @@ function ProviderSettingsFieldRow({
         {variant === "card" ? (
           <DraftInput
             id={inputId}
+            size="sm"
             className="mt-1.5"
             type={type}
             autoComplete={field.control === "password" ? "off" : undefined}
diff --git a/apps/web/src/components/settings/ProviderSettingsPanel.tsx b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
index b5826ff853e9524f0d4344bc28bf32e4c0ed76c9..1399caa9b2614ea19e1a407a98c08be1f8c738db 100644
--- a/apps/web/src/components/settings/ProviderSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
@@ -869,7 +869,7 @@ export function EnvironmentProviderSettings({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="compact"
+                        size="xs"
                         variant="ghost-muted"
                         disabled={isRefreshingProviders}
                         onClick={() => void refreshProviders()}
@@ -892,12 +892,12 @@ export function EnvironmentProviderSettings({
                   <TooltipTrigger
                     render={
                       <Button
-                        size="icon-micro"
+                        size="icon-xs"
                         variant="ghost-muted"
                         onClick={() => setIsAddInstanceDialogOpen(true)}
                         aria-label="Add provider"
                       >
-                        <PlusIcon className="size-3" />
+                        <PlusIcon />
                       </Button>
                     }
                   />
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 2fdc985a84d8e6ac74523f0360265d41a989b08e..3c5f6d7037a68ddbef40d795d982395131772e25 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -146,6 +146,7 @@ import {
 } from "./SettingsPanels.logic";
 import {
   PolicyTooltip,
+  SETTINGS_PICKER_TRIGGER_CLASSNAME,
   SettingResetButton,
   SettingsPageContainer,
   SettingsRow,
@@ -391,7 +392,7 @@ function AboutVersionSection() {
             <TooltipTrigger
               render={
                 <Button
-                  size="xs"
+                  size="sm"
                   variant="outline"
                   disabled={buttonDisabled || isUpdateActionPending}
                   onClick={handleButtonClick}
@@ -416,6 +417,7 @@ function AboutVersionSection() {
               }}
             >
               <SelectTrigger
+                size="sm"
                 className="w-full sm:w-40"
                 aria-label="Update track"
                 disabled={isChangingUpdateChannel}
@@ -449,7 +451,7 @@ function AboutVersionSection() {
                 );
               }}
             >
-              <SelectTrigger className="w-full sm:w-40" aria-label="Update track">
+              <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Update track">
                 <SelectValue>{HOSTED_APP_CHANNEL_LABEL}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -805,7 +807,11 @@ function BackgroundActivityAdvancedDialog({
                   }
                 }}
               >
-                <SelectTrigger className="w-full sm:w-40" aria-label="Shared background policy">
+                <SelectTrigger
+                  size="sm"
+                  className="w-full sm:w-40"
+                  aria-label="Shared background policy"
+                >
                   <SelectValue>{BACKGROUND_ACTIVITY_PROFILE_LABELS[activeProfile]}</SelectValue>
                 </SelectTrigger>
                 <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -1194,7 +1200,11 @@ export function AppearanceSettingsPanel() {
                   }
                 }}
               >
-                <SelectTrigger className="w-full sm:w-40" aria-label="Environment identification">
+                <SelectTrigger
+                  size="sm"
+                  className="w-full sm:w-40"
+                  aria-label="Environment identification"
+                >
                   <SelectValue>
                     {ENVIRONMENT_IDENTIFICATION_LABELS[settings.environmentIdentificationMode]}
                   </SelectValue>
@@ -1701,6 +1711,7 @@ function FontFamilySettingsRow({
       />
     ) : (
       <Input
+        size="sm"
         aria-label={`${title} family`}
         aria-invalid={draftPending || undefined}
         autoCapitalize="off"
@@ -1760,7 +1771,7 @@ function FontFamilySettingsRow({
           }
         }}
       >
-        <SelectTrigger className="w-22 shrink-0" aria-label={size.label}>
+        <SelectTrigger size="sm" className="w-22 shrink-0" aria-label={size.label}>
           <SelectValue>{size.value} px</SelectValue>
         </SelectTrigger>
         <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -1806,6 +1817,7 @@ function AutoSettleDaysInput({
 
   return (
     <Input
+      size="sm"
       type="number"
       min={MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
       max={MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
@@ -2167,7 +2179,7 @@ export function GeneralSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger className="w-full sm:w-40" aria-label="Timestamp format">
+              <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Timestamp format">
                 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -2358,7 +2370,11 @@ export function GeneralSettingsPanel() {
                   }
                 }}
               >
-                <SelectTrigger className="w-full sm:w-40" aria-label="Background activity profile">
+                <SelectTrigger
+                  size="sm"
+                  className="w-full sm:w-40"
+                  aria-label="Background activity profile"
+                >
                   <SelectValue>
                     {BACKGROUND_ACTIVITY_PROFILE_OPTION_LABELS[backgroundActivityProfileOption]}
                   </SelectValue>
@@ -2432,7 +2448,7 @@ export function GeneralSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger className="w-full sm:w-44" aria-label="Default thread mode">
+              <SelectTrigger size="sm" className="w-full sm:w-44" aria-label="Default thread mode">
                 <SelectValue>
                   {settings.defaultThreadEnvMode === "worktree" ? "New worktree" : "Local"}
                 </SelectValue>
@@ -2500,6 +2516,7 @@ export function GeneralSettingsPanel() {
           }
           control={
             <DraftInput
+              size="sm"
               className="w-full sm:w-72"
               value={settings.addProjectBaseDirectory}
               onCommit={(next) => updateSettings({ addProjectBaseDirectory: next })}
@@ -2611,7 +2628,11 @@ export function GeneralSettingsPanel() {
                   }
                 }}
               >
-                <SelectTrigger className="w-full sm:w-40" aria-label="Quit shortcut behavior">
+                <SelectTrigger
+                  size="sm"
+                  className="w-full sm:w-40"
+                  aria-label="Quit shortcut behavior"
+                >
                   <SelectValue>{QUIT_CONFIRMATION_MODE_LABELS[settings.confirmQuit]}</SelectValue>
                 </SelectTrigger>
                 <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -2652,7 +2673,7 @@ export function GeneralSettingsPanel() {
                 instanceEntries={textGenerationModelInstanceEntries}
                 modelOptionsByInstance={textGenerationModelOptionsByInstance}
                 triggerVariant="outline"
-                triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                triggerClassName={SETTINGS_PICKER_TRIGGER_CLASSNAME}
                 onInstanceModelChange={(instanceId, model) => {
                   updateSettings({
                     textGenerationModelSelection: resolveAppModelSelectionState(
@@ -2681,7 +2702,7 @@ export function GeneralSettingsPanel() {
                 allowPromptInjectedEffort={false}
                 planModeEnabled={settings.planModeEnabled}
                 triggerVariant="outline"
-                triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                triggerClassName={SETTINGS_PICKER_TRIGGER_CLASSNAME}
                 onModelOptionsChange={(nextOptions) => {
                   updateSettings({
                     textGenerationModelSelection: resolveAppModelSelectionState(
@@ -2716,7 +2737,7 @@ export function GeneralSettingsPanel() {
           {...searchableSetting("diagnostics")}
           description={diagnosticsDescription}
           control={
-            <Button render={<Link to="/settings/diagnostics" />} size="xs" variant="outline">
+            <Button render={<Link to="/settings/diagnostics" />} size="sm" variant="outline">
               View diagnostics
             </Button>
           }
@@ -2924,8 +2945,8 @@ export function ArchivedThreadsPanel() {
                   <Button
                     type="button"
                     variant="outline"
-                    size="sm"
-                    className="h-7 shrink-0 cursor-pointer gap-1.5 px-2.5"
+                    size="xs"
+                    className="shrink-0"
                     onClick={() => {
                       void (async () => {
                         const result = await unarchiveThread(
diff --git a/apps/web/src/components/settings/SharedSettingsMismatchAlert.tsx b/apps/web/src/components/settings/SharedSettingsMismatchAlert.tsx
index ce6ca85cb20d0b9d2211cfc98facfd7d75950b9d..2a804cf9aeb2ff90ab09147570896c594397be31 100644
--- a/apps/web/src/components/settings/SharedSettingsMismatchAlert.tsx
+++ b/apps/web/src/components/settings/SharedSettingsMismatchAlert.tsx
@@ -23,7 +23,7 @@ export function SharedSettingsMismatchAlert() {
         every environment.
       </AlertDescription>
       <AlertAction>
-        <Button variant="outline" size="compact" onClick={applyToAll}>
+        <Button variant="outline" size="xs" onClick={applyToAll}>
           Apply to all
         </Button>
       </AlertAction>
diff --git a/apps/web/src/components/settings/SourceControlSettings.tsx b/apps/web/src/components/settings/SourceControlSettings.tsx
index 51f3e7bfa932c274264c95374a04db802d068714..480ff26cc7f79379dcd5f0977031ea46ee913513 100644
--- a/apps/web/src/components/settings/SourceControlSettings.tsx
+++ b/apps/web/src/components/settings/SourceControlSettings.tsx
@@ -312,7 +312,7 @@ function DiscoveryItemRow({
           <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto sm:justify-end">
             {hasDetails ? (
               <Button
-                size="compact"
+                size="icon-xs"
                 variant="ghost-muted"
                 onClick={() => setIsExpanded((open) => !open)}
                 aria-expanded={isExpanded}
@@ -487,13 +487,7 @@ function EmptySourceControlDiscovery({
           </EmptyDescription>
         </EmptyHeader>
         <EmptyContent>
-          <Button
-            size="sm"
-            variant="outline"
-            className="h-8 gap-1.5 px-3 text-xs"
-            onClick={onScan}
-            disabled={isPending}
-          >
+          <Button size="sm" variant="outline" onClick={onScan} disabled={isPending}>
             <RefreshCwIcon className={cn("size-3.5", isPending && "animate-spin")} />
             Scan
           </Button>
@@ -533,13 +527,13 @@ export function SourceControlSettingsPanel() {
       <TooltipTrigger
         render={
           <Button
-            size="icon-micro"
+            size="icon-xs"
             variant="ghost-muted"
             onClick={handleScan}
             disabled={discovery.isPending}
             aria-label="Rescan server environment"
           >
-            <RefreshCwIcon className={cn("size-3", discovery.isPending && "animate-spin")} />
+            <RefreshCwIcon className={cn(discovery.isPending && "animate-spin")} />
           </Button>
         }
       />
diff --git a/apps/web/src/components/settings/SourceControlWritingSettings.tsx b/apps/web/src/components/settings/SourceControlWritingSettings.tsx
index 33da931b9db5aac54291520db4eabd827d9de7bc..47d0324c7f930f013b54713d6400e5cd3a05f4b6 100644
--- a/apps/web/src/components/settings/SourceControlWritingSettings.tsx
+++ b/apps/web/src/components/settings/SourceControlWritingSettings.tsx
@@ -20,7 +20,12 @@ import { ProviderModelPicker } from "../chat/ProviderModelPicker";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { Switch } from "../ui/switch";
 import { Textarea } from "../ui/textarea";
-import { SettingResetButton, SettingsRow, SettingsSection } from "./settingsLayout";
+import {
+  SETTINGS_PICKER_TRIGGER_CLASSNAME,
+  SettingResetButton,
+  SettingsRow,
+  SettingsSection,
+} from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
 
 const MODE_OPTIONS: Record<SourceControlWritingStyleMode, { label: string; description: string }> =
@@ -105,7 +110,11 @@ export function SourceControlWritingSettingsSection() {
               });
             }}
           >
-            <SelectTrigger className="w-full sm:w-56" aria-label="Source control writing style">
+            <SelectTrigger
+              size="sm"
+              className="w-full sm:w-56"
+              aria-label="Source control writing style"
+            >
               <SelectValue>{MODE_OPTIONS[style.mode].label}</SelectValue>
             </SelectTrigger>
             <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -185,7 +194,7 @@ export function SourceControlWritingSettingsSection() {
                 instanceEntries={instanceEntries}
                 modelOptionsByInstance={modelOptionsByInstance}
                 triggerVariant="outline"
-                triggerClassName="min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground"
+                triggerClassName={SETTINGS_PICKER_TRIGGER_CLASSNAME}
                 triggerAriaLabel="Source control writer model"
                 onInstanceModelChange={(instanceId, model) => {
                   updateSettings({
diff --git a/apps/web/src/components/settings/ThemeEditorPanel.tsx b/apps/web/src/components/settings/ThemeEditorPanel.tsx
index 9ac264cd00d3e6bfdee1676d2357e49b0b5e00b5..4e85bc8806e86476ee797037cf9a897b625c7978 100644
--- a/apps/web/src/components/settings/ThemeEditorPanel.tsx
+++ b/apps/web/src/components/settings/ThemeEditorPanel.tsx
@@ -928,6 +928,7 @@ export function ThemeEditorPanel({
       <span className="text-sm font-medium">Theme name</span>
       <Input
         autoFocus
+        size="sm"
         onChange={(event) => {
           setName(event.currentTarget.value);
           // Most save failures are name collisions; retyping is the fix, so
@@ -949,6 +950,7 @@ export function ThemeEditorPanel({
       <Button
         aria-disabled={lockReason !== null}
         aria-pressed={isActive}
+        size="sm"
         className={lockReason !== null ? "opacity-50" : undefined}
         style={isActive ? { boxShadow: "inset 0 0 0 1px var(--ring)" } : undefined}
         variant={isActive ? "secondary" : "outline"}
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index e9b7a98883677995a58932901bba0c50c17c91fe..35451ba88136d8763aaed98013a1d6d5a4ab574f 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -100,6 +100,14 @@ export function SettingsSearchTarget({
   );
 }
 
+/**
+ * Trigger classes for the composer model/traits pickers when they sit in a
+ * settings row: match the `sm` control box (the composer pins them to 28px at
+ * every breakpoint) and drop the composer's max-width.
+ */
+export const SETTINGS_PICKER_TRIGGER_CLASSNAME =
+  "h-8 min-h-8 min-w-0 max-w-none shrink-0 text-foreground/90 hover:text-foreground sm:h-7 sm:min-h-7";
+
 /** Info affordance explaining how a setting interacts with the shared background policy. */
 export function PolicyTooltip({ children }: { readonly children: string }) {
   return (
@@ -168,6 +176,12 @@ export function SettingsSection({
  * environment's settings.json; where there is no primary (the hosted app)
  * the control goes inert with a tooltip instead of showing an editable
  * default that would never save.
+ *
+ * Control sizing across settings follows three tiers so rows share a baseline:
+ * - `control` slot: `size="sm"` (Button, Select, Input, NumberField) or `icon-sm`.
+ * - Section `headerAction`s and buttons inside list items, cards, toolbars: `xs` / `icon-xs`.
+ * - Inline affordances (reset arrows, info tooltips, table-cell buttons): `icon-micro`.
+ * Dialog footers keep the app-wide default button size.
  */
 export function SettingsRow({
   title,
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
index 4b65b5466bb0073949b884de112ae776e960e733..0d45c88861e1a45b096ae8ae58d357ef77005061 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/apps/web/src/components/ui/switch.tsx
@@ -4,13 +4,21 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 
 import { cn } from "~/lib/utils";
 
-function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & { size?: "default" | "sm" }) {
   return (
     <SwitchPrimitive.Root
       className={cn(
-        "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 cursor-pointer items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]",
+        "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 cursor-pointer items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-64",
+        size === "sm"
+          ? "[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3.5)]"
+          : "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
         className,
       )}
+      data-size={size}
       data-slot="switch"
       {...props}
     >
-- 
2.54.0