From 9c395626e9edc28c756d9a1f7909b02e45eb47a6 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Thu, 5 Nov 2026 16:47:21 +0000
Subject: [PATCH 1/4] fix(web): align settings row fields on a 28 pixel well
 surface

---
 .../settings/AcpSessionManagementSection.tsx  |  7 +-
 .../settings/AddCodexAccountDialog.tsx        |  1 +
 .../settings/AddProviderInstanceDialog.tsx    |  4 +-
 .../settings/AppearanceSettingsPanel.tsx      | 14 +++-
 .../settings/BackgroundActivitySettings.tsx   |  6 +-
 .../settings/BranchNamingSettings.tsx         |  3 +-
 .../components/settings/CodexSetupSection.tsx |  3 +
 .../settings/ConnectionsSettings.tsx          |  3 +-
 .../components/settings/FontFamilyPicker.tsx  |  5 +-
 .../settings/IntegrationsSettings.tsx         | 22 +++---
 .../settings/IntervalSecondsField.tsx         |  2 +-
 .../settings/LoadBalancingSettings.tsx        |  3 +-
 .../settings/NotificationSettings.tsx         |  7 +-
 .../settings/ProjectDefaultsSettings.tsx      | 16 +++--
 .../settings/ProjectSettingsPanel.tsx         |  2 +-
 .../ProviderAuthenticationSection.tsx         |  7 +-
 .../settings/ProviderInstanceCard.tsx         |  6 +-
 .../settings/ProviderSettingsForm.tsx         | 18 +++--
 .../settings/PullRequestRoutingSettings.tsx   |  3 +-
 .../components/settings/SecretSourceInput.tsx |  2 +-
 .../components/settings/SettingsPanels.tsx    | 72 +++++++++++++++----
 .../settings/SnoozePresetsSettings.tsx        |  2 +-
 .../settings/SourceControlWritingSettings.tsx |  3 +-
 .../components/settings/StorageSettings.tsx   | 12 +++-
 .../settings/TypographySettings.tsx           |  9 ++-
 25 files changed, 173 insertions(+), 59 deletions(-)

diff --git a/apps/web/src/components/settings/AcpSessionManagementSection.tsx b/apps/web/src/components/settings/AcpSessionManagementSection.tsx
index b402b52b33dec..626c788636908 100644
--- a/apps/web/src/components/settings/AcpSessionManagementSection.tsx
+++ b/apps/web/src/components/settings/AcpSessionManagementSection.tsx
@@ -420,7 +420,12 @@ function InstanceSessionManagement(
                     props.onProjectChange(value as ProjectId);
                   }}
                 >
-                  <SelectTrigger aria-label="Project for ACP sessions" className="w-40" size="sm">
+                  <SelectTrigger
+                    variant="well"
+                    aria-label="Project for ACP sessions"
+                    className="w-40"
+                    size="compact"
+                  >
                     <SelectValue>
                       {props.projects.find((project) => project.id === projectId)?.title}
                     </SelectValue>
diff --git a/apps/web/src/components/settings/AddCodexAccountDialog.tsx b/apps/web/src/components/settings/AddCodexAccountDialog.tsx
index 62d8d10342910..fe481ad3b531e 100644
--- a/apps/web/src/components/settings/AddCodexAccountDialog.tsx
+++ b/apps/web/src/components/settings/AddCodexAccountDialog.tsx
@@ -117,6 +117,7 @@ export function AddCodexAccountDialog({
                 description="Shown in the provider list and model picker."
                 control={
                   <Input
+                    size="settings"
                     aria-label="Account name"
                     value={name}
                     disabled={pending}
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index 6086357dfd093..b371023b3ad10 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -639,7 +639,7 @@ export function AddProviderInstanceDialog({
                     <Input
                       id="add-provider-label"
                       aria-describedby="add-provider-label-description"
-                      size="sm"
+                      size="settings"
                       className="w-full @min-[26rem]/settings-row:w-56"
                       placeholder="e.g. Work"
                       value={label}
@@ -673,7 +673,7 @@ export function AddProviderInstanceDialog({
                           ? "add-provider-instance-id-description add-provider-instance-id-error"
                           : "add-provider-instance-id-description"
                       }
-                      size="sm"
+                      size="settings"
                       className="w-full @min-[26rem]/settings-row:w-56"
                       placeholder={`${driver}_work`}
                       value={instanceId}
diff --git a/apps/web/src/components/settings/AppearanceSettingsPanel.tsx b/apps/web/src/components/settings/AppearanceSettingsPanel.tsx
index 2d859c33785e7..6bdc7f930a5bf 100644
--- a/apps/web/src/components/settings/AppearanceSettingsPanel.tsx
+++ b/apps/web/src/components/settings/AppearanceSettingsPanel.tsx
@@ -263,7 +263,12 @@ export function AppearanceSettingsPanel() {
                     updateSettings({ chatWidth: value });
                 }}
               >
-                <SelectTrigger size="sm" className="w-full min-w-0" aria-label="Chat width">
+                <SelectTrigger
+                  variant="well"
+                  size="compact"
+                  className="w-full min-w-0"
+                  aria-label="Chat width"
+                >
                   <SelectValue>{CHAT_WIDTH_LABELS[settings.chatWidth]}</SelectValue>
                 </SelectTrigger>
                 <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -298,7 +303,12 @@ export function AppearanceSettingsPanel() {
                     updateSettings({ effortDisplay: value });
                 }}
               >
-                <SelectTrigger size="sm" className="w-full min-w-0" aria-label="Effort display">
+                <SelectTrigger
+                  variant="well"
+                  size="compact"
+                  className="w-full min-w-0"
+                  aria-label="Effort display"
+                >
                   <SelectValue>{EFFORT_DISPLAY_LABELS[settings.effortDisplay]}</SelectValue>
                 </SelectTrigger>
                 <SelectPopup align="end" alignItemWithTrigger={false}>
diff --git a/apps/web/src/components/settings/BackgroundActivitySettings.tsx b/apps/web/src/components/settings/BackgroundActivitySettings.tsx
index 1d03a3d2d6d9b..54e1281bc558a 100644
--- a/apps/web/src/components/settings/BackgroundActivitySettings.tsx
+++ b/apps/web/src/components/settings/BackgroundActivitySettings.tsx
@@ -148,7 +148,8 @@ function BackgroundActivityAdvancedDialog({
                 }}
               >
                 <SelectTrigger
-                  size="sm"
+                  variant="well"
+                  size="compact"
                   className="w-full sm:w-40"
                   aria-label="Shared background policy"
                 >
@@ -385,7 +386,8 @@ export function BackgroundActivitySettingsRow() {
             }}
           >
             <SelectTrigger
-              size="sm"
+              variant="well"
+              size="compact"
               className="w-full sm:w-40"
               aria-label="Background activity profile"
             >
diff --git a/apps/web/src/components/settings/BranchNamingSettings.tsx b/apps/web/src/components/settings/BranchNamingSettings.tsx
index d5365e8c912b3..99292f6aee1e3 100644
--- a/apps/web/src/components/settings/BranchNamingSettings.tsx
+++ b/apps/web/src/components/settings/BranchNamingSettings.tsx
@@ -61,7 +61,7 @@ export function BranchNamingSettings() {
               }
             }}
           >
-            <SelectTrigger size="sm" aria-label="Worktree branch naming">
+            <SelectTrigger variant="well" size="compact" aria-label="Worktree branch naming">
               <SelectValue>
                 {(value: BranchNamingMode | null) => (value === null ? "Mixed" : MODES[value])}
               </SelectValue>
@@ -95,6 +95,7 @@ export function BranchNamingSettings() {
           }
           control={
             <Input
+              size="settings"
               key={`${scopeKey}:${prefixMixed}:${settings.branchNamePrefix}`}
               aria-label="Branch prefix"
               autoCapitalize="none"
diff --git a/apps/web/src/components/settings/CodexSetupSection.tsx b/apps/web/src/components/settings/CodexSetupSection.tsx
index 5b2817ac0e136..66c786d2a1f32 100644
--- a/apps/web/src/components/settings/CodexSetupSection.tsx
+++ b/apps/web/src/components/settings/CodexSetupSection.tsx
@@ -896,6 +896,7 @@ export function CodexManagedRuntimeFields({
         control={
           <div className="w-full sm:w-80">
             <Input
+              size="settings"
               aria-label="Codex binary path"
               value={executablePath}
               title={executablePath}
@@ -911,6 +912,7 @@ export function CodexManagedRuntimeFields({
         control={
           <div className="w-full sm:w-80">
             <Input
+              size="settings"
               aria-label="Codex home path"
               value={provider?.runtimePaths?.homePath ?? ""}
               title={provider?.runtimePaths?.homePath}
@@ -930,6 +932,7 @@ export function CodexManagedRuntimeFields({
         control={
           <div className="w-full sm:w-80">
             <Input
+              size="settings"
               aria-label="Codex shadow home path"
               value={provider?.runtimePaths?.shadowHomePath ?? ""}
               title={provider?.runtimePaths?.shadowHomePath ?? undefined}
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 7975bcafeca98..a2eed823be9e8 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -954,7 +954,8 @@ function ConnectionsSettingsContent({
               }}
             >
               <SelectTrigger
-                size="sm"
+                variant="well"
+                size="compact"
                 className="w-full sm:w-56"
                 aria-label="WSL backend"
                 disabled={isUpdatingWslBackend}
diff --git a/apps/web/src/components/settings/FontFamilyPicker.tsx b/apps/web/src/components/settings/FontFamilyPicker.tsx
index 5958550ce9e0a..cdf11cc17dd8f 100644
--- a/apps/web/src/components/settings/FontFamilyPicker.tsx
+++ b/apps/web/src/components/settings/FontFamilyPicker.tsx
@@ -188,7 +188,10 @@ export function FontFamilyPicker({
         void listRef.current?.scrollIndexIntoView?.({ index: eventDetails.index, animated: false });
       }}
     >
-      <ComboboxTrigger aria-label={ariaLabel} render={<SelectButton size="sm" />}>
+      <ComboboxTrigger
+        aria-label={ariaLabel}
+        render={<SelectButton variant="well" size="compact" />}
+      >
         {selectedFamily.length === 0 ? defaultFamily : selectedFamily}
       </ComboboxTrigger>
       <ComboboxPopup align="end" className="flex w-72 flex-col">
diff --git a/apps/web/src/components/settings/IntegrationsSettings.tsx b/apps/web/src/components/settings/IntegrationsSettings.tsx
index 5143cfb6228a5..a8c2339d6084a 100644
--- a/apps/web/src/components/settings/IntegrationsSettings.tsx
+++ b/apps/web/src/components/settings/IntegrationsSettings.tsx
@@ -375,7 +375,7 @@ function BrowserViewportSetting({ disabled }: { readonly disabled: boolean }) {
       control={
         <div className="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
           <Select value={selectedViewport} onValueChange={selectViewport} disabled={disabled}>
-            <SelectTrigger size="sm" aria-label="Default browser viewport">
+            <SelectTrigger variant="well" size="compact" aria-label="Default browser viewport">
               <SelectValue>{viewportSelectLabel(viewport)}</SelectValue>
             </SelectTrigger>
             <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -402,7 +402,7 @@ function BrowserViewportSetting({ disabled }: { readonly disabled: boolean }) {
                 max={PREVIEW_VIEWPORT_MAX_DIMENSION}
                 disabled={disabled}
                 format={NO_GROUPING}
-                size="sm"
+                size="compact"
                 className="w-20"
                 onValueCommitted={(value) => commitDimension("width", value)}
               >
@@ -417,7 +417,7 @@ function BrowserViewportSetting({ disabled }: { readonly disabled: boolean }) {
                 max={PREVIEW_VIEWPORT_MAX_DIMENSION}
                 disabled={disabled}
                 format={NO_GROUPING}
-                size="sm"
+                size="compact"
                 className="w-20"
                 onValueCommitted={(value) => commitDimension("height", value)}
               >
@@ -481,7 +481,8 @@ function BrowserZoomSetting({ disabled }: { readonly disabled: boolean }) {
           }}
         >
           <SelectTrigger
-            size="sm"
+            variant="well"
+            size="compact"
             className="w-full sm:w-40"
             aria-label="Default browser zoom"
             leadingIcon={<ZoomInIcon />}
@@ -526,7 +527,7 @@ function BrowserAppearanceSetting({ disabled }: { readonly disabled: boolean })
               updateSettings({ browserDefaultAppearance: value });
           }}
         >
-          <SelectTrigger size="sm" aria-label="Default browser appearance">
+          <SelectTrigger variant="well" size="compact" aria-label="Default browser appearance">
             <SelectValue>{APPEARANCE_LABELS[appearance]}</SelectValue>
           </SelectTrigger>
           <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -609,7 +610,7 @@ function BrowserRecordingFrameRateSetting({ disabled }: { readonly disabled: boo
             if (next !== undefined) updateSettings({ browserRecordingFrameRate: next });
           }}
         >
-          <SelectTrigger size="sm" aria-label="Browser recording frame rate">
+          <SelectTrigger variant="well" size="compact" aria-label="Browser recording frame rate">
             <SelectValue>{frameRate} fps</SelectValue>
           </SelectTrigger>
           <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -720,7 +721,12 @@ function BrowserSearchEngineSetting() {
               }
             }}
           >
-            <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Search engine">
+            <SelectTrigger
+              variant="well"
+              size="compact"
+              className="w-full sm:w-40"
+              aria-label="Search engine"
+            >
               <SelectValue>{SEARCH_ENGINE_LABELS[engine]}</SelectValue>
             </SelectTrigger>
             <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -745,7 +751,7 @@ function BrowserSearchEngineSetting() {
           control={
             <DraftInput
               nativeInput
-              size="sm"
+              size="settings"
               className="w-full sm:w-64"
               aria-label="Custom search URL"
               placeholder="https://example.com/search?q=%s"
diff --git a/apps/web/src/components/settings/IntervalSecondsField.tsx b/apps/web/src/components/settings/IntervalSecondsField.tsx
index 3480e97de3cf7..4e4b662191260 100644
--- a/apps/web/src/components/settings/IntervalSecondsField.tsx
+++ b/apps/web/src/components/settings/IntervalSecondsField.tsx
@@ -36,7 +36,7 @@ export function IntervalSecondsField({
       value={field.draft}
       min={min}
       step={step}
-      size="sm"
+      size="compact"
       className="w-32"
       onValueChange={(draft) => setField((current) => ({ ...current, draft }))}
       onValueCommitted={(next) => {
diff --git a/apps/web/src/components/settings/LoadBalancingSettings.tsx b/apps/web/src/components/settings/LoadBalancingSettings.tsx
index 368b868144faa..3cf563dfa2b33 100644
--- a/apps/web/src/components/settings/LoadBalancingSettings.tsx
+++ b/apps/web/src/components/settings/LoadBalancingSettings.tsx
@@ -84,7 +84,8 @@ export function LoadBalancingSettings({
             }}
           >
             <SelectTrigger
-              size="xs"
+              variant="well"
+              size="compact"
               className="w-32"
               aria-label={`${environment.label} load preference`}
             >
diff --git a/apps/web/src/components/settings/NotificationSettings.tsx b/apps/web/src/components/settings/NotificationSettings.tsx
index d0728e28f89d0..dd83f5f71aeb6 100644
--- a/apps/web/src/components/settings/NotificationSettings.tsx
+++ b/apps/web/src/components/settings/NotificationSettings.tsx
@@ -64,7 +64,12 @@ export function NotificationSettings() {
             updateSettings({ notificationMode: value });
           }}
         >
-          <SelectTrigger size="sm" className="w-full sm:w-56" aria-label="Thread notifications">
+          <SelectTrigger
+            variant="well"
+            size="compact"
+            className="w-full sm:w-56"
+            aria-label="Thread notifications"
+          >
             <SelectValue>{NOTIFICATION_MODE_LABELS[mode]}</SelectValue>
           </SelectTrigger>
           <SelectPopup align="end" alignItemWithTrigger={false}>
diff --git a/apps/web/src/components/settings/ProjectDefaultsSettings.tsx b/apps/web/src/components/settings/ProjectDefaultsSettings.tsx
index 50f44578c3f7d..bbf1c6cc9b432 100644
--- a/apps/web/src/components/settings/ProjectDefaultsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectDefaultsSettings.tsx
@@ -223,7 +223,8 @@ export function ProjectDefaultsSettings({ category }: { category: ProjectSetting
           }}
         >
           <SelectTrigger
-            size="sm"
+            variant="well"
+            size="compact"
             aria-label="Default workspace"
             leadingIcon={
               (effective?.defaultThreadEnvMode ?? null) === "worktree" && !mixedWorkspace ? (
@@ -350,7 +351,8 @@ export function ProjectDefaultsSettings({ category }: { category: ProjectSetting
           }}
         >
           <SelectTrigger
-            size="sm"
+            variant="well"
+            size="compact"
             aria-label="Default permissions"
             leadingIcon={mixedPermissions ? undefined : <PermissionIcon />}
           >
@@ -477,7 +479,8 @@ export function ProjectDefaultsSettings({ category }: { category: ProjectSetting
           }}
         >
           <SelectTrigger
-            size="sm"
+            variant="well"
+            size="compact"
             aria-label="Default pull request merge method"
             leadingIcon={<PullRequestGlyph.merged />}
           >
@@ -614,7 +617,12 @@ export function WorktreeSubmodulesRow() {
             if (isWorktreeSubmodules(value)) updateSettings({ worktreeSubmodules: value });
           }}
         >
-          <SelectTrigger size="sm" aria-label="Worktree submodules" leadingIcon={<GitBranchIcon />}>
+          <SelectTrigger
+            variant="well"
+            size="compact"
+            aria-label="Worktree submodules"
+            leadingIcon={<GitBranchIcon />}
+          >
             <SelectValue>
               {(value: string | null) =>
                 isWorktreeSubmodules(value)
diff --git a/apps/web/src/components/settings/ProjectSettingsPanel.tsx b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
index a57b9a37c3ff0..c3b63c99ef218 100644
--- a/apps/web/src/components/settings/ProjectSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProjectSettingsPanel.tsx
@@ -605,7 +605,7 @@ function ProjectDetail({
             control={
               <Input
                 key={`${group.projectKey}:${group.displayName}`}
-                size="sm"
+                size="settings"
                 className="w-full sm:w-50"
                 aria-label="Project name"
                 disabled={!canEditGroup}
diff --git a/apps/web/src/components/settings/ProviderAuthenticationSection.tsx b/apps/web/src/components/settings/ProviderAuthenticationSection.tsx
index 8dd6802fb4fdc..51a9a16cde3a3 100644
--- a/apps/web/src/components/settings/ProviderAuthenticationSection.tsx
+++ b/apps/web/src/components/settings/ProviderAuthenticationSection.tsx
@@ -198,7 +198,12 @@ export function ProviderAuthenticationSection({
               disabled={disabled}
               onValueChange={(value) => setMethodId(value ?? "")}
             >
-              <SelectTrigger size="sm" aria-label="Sign-in method" className="w-44">
+              <SelectTrigger
+                variant="well"
+                size="compact"
+                aria-label="Sign-in method"
+                className="w-44"
+              >
                 <SelectValue>
                   {auth?.methods?.find((method) => method.id === methodId)?.name ??
                     "Provider default"}
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index 955724688041a..01366236d1b0a 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -300,7 +300,7 @@ function ProviderEnvironmentFieldRow(props: {
           {props.field.sensitive === false ? (
             <DraftInput
               id={inputId}
-              size="sm"
+              size="settings"
               className="min-w-0 flex-1"
               autoComplete="off"
               value={typeof value === "string" ? value : ""}
@@ -311,7 +311,7 @@ function ProviderEnvironmentFieldRow(props: {
           ) : (
             <SecretSourceInput
               id={inputId}
-              size="sm"
+              size="settings"
               className="min-w-0 flex-1"
               value={value}
               onCommit={(next) => props.onCommit(props.field, next)}
@@ -1321,7 +1321,7 @@ export function ProviderInstanceCard({
                 />
                 <DraftInput
                   id={`provider-instance-${instanceId}-display-name`}
-                  size="sm"
+                  size="settings"
                   className="min-w-0 flex-1 @min-[26rem]/settings-row:w-50"
                   value={instance.displayName ?? ""}
                   onCommit={updateDisplayName}
diff --git a/apps/web/src/components/settings/ProviderSettingsForm.tsx b/apps/web/src/components/settings/ProviderSettingsForm.tsx
index 91b4b150ef34a..e4a04e2f0a8a9 100644
--- a/apps/web/src/components/settings/ProviderSettingsForm.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsForm.tsx
@@ -368,7 +368,7 @@ function SecretSettingsControl({
         id={inputId}
         aria-describedby={descriptionId}
         aria-label={field.label}
-        size="sm"
+        size="settings"
         className="min-w-0 flex-1"
         value={reference ?? ""}
         configured={reference === undefined && configured}
@@ -404,7 +404,7 @@ function ProviderSettingsSelect({
   readonly field: ProviderSettingsFieldModel;
   readonly value: unknown;
   readonly inputId: string;
-  readonly size: "sm" | "xs";
+  readonly size: "sm" | "xs" | "compact";
   readonly className?: string | undefined;
   readonly onChange: ProviderSettingsFormProps["onChange"];
 }) {
@@ -420,7 +420,13 @@ function ProviderSettingsSelect({
         onChange(nextProviderConfigWithFieldValue(value, field, next === fallback ? "" : next));
       }}
     >
-      <SelectTrigger id={inputId} size={size} className={className} aria-label={field.label}>
+      <SelectTrigger
+        variant={size === "compact" ? "well" : "default"}
+        id={inputId}
+        size={size}
+        className={className}
+        aria-label={field.label}
+      >
         <SelectValue>{label}</SelectValue>
       </SelectTrigger>
       <SelectPopup align="start" alignItemWithTrigger={false}>
@@ -492,7 +498,7 @@ function ProviderSettingsFieldRow({
           field={field}
           value={value}
           inputId={inputId}
-          size="sm"
+          size="compact"
           className="w-full max-w-full @min-[26rem]/settings-row:w-50"
           onChange={onChange}
         />
@@ -522,7 +528,7 @@ function ProviderSettingsFieldRow({
           <SecretInput
             id={inputId}
             aria-describedby={descriptionId}
-            size="sm"
+            size="settings"
             className="min-w-0 flex-1"
             configured={secretConfigured}
             value=""
@@ -544,7 +550,7 @@ function ProviderSettingsFieldRow({
         <DraftInput
           id={inputId}
           aria-describedby={descriptionId}
-          size="sm"
+          size="settings"
           className="w-full max-w-full @min-[26rem]/settings-row:w-50"
           type={field.control === "password" ? "password" : undefined}
           autoComplete={field.control === "password" ? "off" : undefined}
diff --git a/apps/web/src/components/settings/PullRequestRoutingSettings.tsx b/apps/web/src/components/settings/PullRequestRoutingSettings.tsx
index a3e7206a02b75..00057aa0c68d6 100644
--- a/apps/web/src/components/settings/PullRequestRoutingSettings.tsx
+++ b/apps/web/src/components/settings/PullRequestRoutingSettings.tsx
@@ -108,7 +108,8 @@ export function PullRequestRoutingSettings({
             }}
           >
             <SelectTrigger
-              size="xs"
+              variant="well"
+              size="compact"
               className="w-32"
               aria-label={`${environment.label} pull request routing`}
             >
diff --git a/apps/web/src/components/settings/SecretSourceInput.tsx b/apps/web/src/components/settings/SecretSourceInput.tsx
index 9cb6401e2f9d0..a0b532e3a3582 100644
--- a/apps/web/src/components/settings/SecretSourceInput.tsx
+++ b/apps/web/src/components/settings/SecretSourceInput.tsx
@@ -170,7 +170,7 @@ export function SecretSourceInput({
       <div className="flex min-w-0 flex-1 flex-col gap-1">
         <DraftInput
           {...(input.id !== undefined ? { id: input.id } : {})}
-          size="sm"
+          size={input.size === "settings" ? "settings" : "sm"}
           font="mono"
           value={rejectedReference ?? reference}
           onCommit={(next) => {
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index fdfdf1d0c6229..668a2134fbf73 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -361,7 +361,8 @@ function AboutVersionSection() {
               }}
             >
               <SelectTrigger
-                size="sm"
+                variant="well"
+                size="compact"
                 className="w-full sm:w-40"
                 aria-label="Update track"
                 disabled={switchChannel !== null || updateRun !== null}
@@ -397,7 +398,12 @@ function AboutVersionSection() {
                 );
               }}
             >
-              <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Update track">
+              <SelectTrigger
+                variant="well"
+                size="compact"
+                className="w-full sm:w-40"
+                aria-label="Update track"
+              >
                 <SelectValue>{HOSTED_APP_CHANNEL_LABEL}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -732,7 +738,7 @@ function AutoSettleDaysInput({
   return (
     <InputGroup className="w-full sm:w-24">
       <InputGroupInput
-        size="sm"
+        size="settings"
         type="number"
         min={MIN_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
         max={MAX_SIDEBAR_AUTO_SETTLE_AFTER_DAYS}
@@ -864,7 +870,12 @@ export function GeneralSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger size="sm" className="w-full sm:w-44" aria-label="Project order">
+              <SelectTrigger
+                variant="well"
+                size="compact"
+                className="w-full sm:w-44"
+                aria-label="Project order"
+              >
                 <SelectValue>
                   {SIDEBAR_PROJECT_SORT_ORDER_LABELS[settings.sidebarProjectSortOrder]}
                 </SelectValue>
@@ -1007,7 +1018,8 @@ export function GeneralSettingsPanel() {
                 }}
               >
                 <SelectTrigger
-                  size="sm"
+                  variant="well"
+                  size="compact"
                   className="w-full sm:w-40"
                   aria-label="Quit shortcut behavior"
                 >
@@ -1051,7 +1063,12 @@ export function GeneralSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Timestamp format">
+              <SelectTrigger
+                variant="well"
+                size="compact"
+                className="w-full sm:w-40"
+                aria-label="Timestamp format"
+              >
                 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -1134,7 +1151,8 @@ export function ChatSettingsPanel() {
               }}
             >
               <SelectTrigger
-                size="sm"
+                variant="well"
+                size="compact"
                 className="w-auto min-w-0 max-w-full"
                 aria-label="Send shortcut"
               >
@@ -1217,7 +1235,12 @@ export function ChatSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger size="sm" className="w-auto min-w-0" aria-label="Follow-up behavior">
+              <SelectTrigger
+                variant="well"
+                size="compact"
+                className="w-auto min-w-0"
+                aria-label="Follow-up behavior"
+              >
                 <SelectValue>
                   {settings.followUpBehavior === "queue" ? "Queue" : "Steer"}
                 </SelectValue>
@@ -1313,7 +1336,12 @@ function DiffColorsSettingsRow() {
                 updateSettings({ diffColorScheme: value });
             }}
           >
-            <SelectTrigger size="sm" className="w-full min-w-0" aria-label="Diff colors">
+            <SelectTrigger
+              variant="well"
+              size="compact"
+              className="w-full min-w-0"
+              aria-label="Diff colors"
+            >
               <span
                 aria-hidden="true"
                 className={
@@ -1367,7 +1395,12 @@ export function DiffsSettingsPanel() {
                 }
               }}
             >
-              <SelectTrigger size="sm" className="w-full sm:w-40" aria-label="Diff layout">
+              <SelectTrigger
+                variant="well"
+                size="compact"
+                className="w-full sm:w-40"
+                aria-label="Diff layout"
+              >
                 <SelectValue>{DIFF_LAYOUT_LABELS[settings.diffLayout]}</SelectValue>
               </SelectTrigger>
               <SelectPopup align="end" alignItemWithTrigger={false}>
@@ -1431,7 +1464,8 @@ export function DiffsSettingsPanel() {
               }}
             >
               <SelectTrigger
-                size="sm"
+                variant="well"
+                size="compact"
                 className="w-full sm:w-40"
                 aria-label="Default diff file state"
               >
@@ -1519,7 +1553,12 @@ function ScopedCompactIdleThreadsRow() {
             if (mode) updateSettings({ idleCompaction: mode.value });
           }}
         >
-          <SelectTrigger size="sm" className="w-full sm:w-56" aria-label="Compact idle threads">
+          <SelectTrigger
+            variant="well"
+            size="compact"
+            className="w-full sm:w-56"
+            aria-label="Compact idle threads"
+          >
             <SelectValue>
               {(value: string | null) =>
                 value === null
@@ -1629,7 +1668,7 @@ export function ThreadsSettingsPanel() {
           }
           control={
             <DraftInput
-              size="sm"
+              size="settings"
               className="w-full sm:w-72"
               value={mixedAddProjectBaseDirectory ? "" : settings.addProjectBaseDirectory}
               onCommit={(next) => updateSettings({ addProjectBaseDirectory: next })}
@@ -1943,7 +1982,12 @@ export function ThreadsSettingsPanel() {
                   }
                 }}
               >
-                <SelectTrigger size="sm" className="w-full sm:w-56" aria-label="Response streaming">
+                <SelectTrigger
+                  variant="well"
+                  size="compact"
+                  className="w-full sm:w-56"
+                  aria-label="Response streaming"
+                >
                   <SelectValue>
                     {(value: ResponseStreamingMode | null) =>
                       value === null ? "Mixed" : RESPONSE_STREAMING_MODE_LABELS[value]
diff --git a/apps/web/src/components/settings/SnoozePresetsSettings.tsx b/apps/web/src/components/settings/SnoozePresetsSettings.tsx
index 07ed5968c1492..010f3233fe641 100644
--- a/apps/web/src/components/settings/SnoozePresetsSettings.tsx
+++ b/apps/web/src/components/settings/SnoozePresetsSettings.tsx
@@ -396,7 +396,7 @@ function SnoozePresetFields(props: {
           <span className="text-meta text-muted-foreground">at</span>
           <Input
             nativeInput
-            size="sm"
+            size="settings"
             type="time"
             className="w-32"
             aria-label="Time"
diff --git a/apps/web/src/components/settings/SourceControlWritingSettings.tsx b/apps/web/src/components/settings/SourceControlWritingSettings.tsx
index 89059170ab216..d44d83563490b 100644
--- a/apps/web/src/components/settings/SourceControlWritingSettings.tsx
+++ b/apps/web/src/components/settings/SourceControlWritingSettings.tsx
@@ -224,7 +224,8 @@ export function SourceControlWritingSettingsSection() {
             }}
           >
             <SelectTrigger
-              size="sm"
+              variant="well"
+              size="compact"
               className="w-full sm:w-56"
               aria-label="Source control writing style"
               leadingIcon={<GitCommitHorizontalIcon />}
diff --git a/apps/web/src/components/settings/StorageSettings.tsx b/apps/web/src/components/settings/StorageSettings.tsx
index f192a07d81fc7..42d1cc3e3d966 100644
--- a/apps/web/src/components/settings/StorageSettings.tsx
+++ b/apps/web/src/components/settings/StorageSettings.tsx
@@ -79,6 +79,7 @@ export function WorktreesDirectoryRow() {
       }
       control={
         <Input
+          size="settings"
           key={`${scopeKey}:${mixed}:${settings.worktreesDirectory}`}
           aria-label="Worktree location"
           autoCapitalize="none"
@@ -153,7 +154,8 @@ function RetentionControl({
         }}
       >
         <SelectTrigger
-          size="sm"
+          variant="well"
+          size="compact"
           aria-label={label}
           leadingIcon={<CalendarIcon />}
           className="w-auto min-w-36"
@@ -204,7 +206,7 @@ function RetentionDaysInput({
   return (
     <InputGroup className="w-24">
       <InputGroupInput
-        size="sm"
+        size="settings"
         type="number"
         min={minimum}
         max={MAX_RETENTION_DAYS}
@@ -746,7 +748,11 @@ export function WorktreeCleanupSection({ title = "Cleanup" }: { title?: string }
                           updateWorktree({ worktreeKeepWhen: next });
                       }}
                     >
-                      <SelectTrigger size="sm" aria-label="Keep worktrees with local changes">
+                      <SelectTrigger
+                        variant="well"
+                        size="compact"
+                        aria-label="Keep worktrees with local changes"
+                      >
                         <SelectValue>
                           {ruleStatus("worktreeKeepWhen")
                             ? "Mixed"
diff --git a/apps/web/src/components/settings/TypographySettings.tsx b/apps/web/src/components/settings/TypographySettings.tsx
index b782c61674823..92cbc84a48803 100644
--- a/apps/web/src/components/settings/TypographySettings.tsx
+++ b/apps/web/src/components/settings/TypographySettings.tsx
@@ -445,7 +445,7 @@ function FontFamilySettingsRow({
       />
     ) : (
       <Input
-        size="sm"
+        size="settings"
         aria-label={`${title} family`}
         aria-invalid={draftPending || undefined}
         autoCapitalize="off"
@@ -505,7 +505,12 @@ function FontFamilySettingsRow({
           }
         }}
       >
-        <SelectTrigger size="sm" className="w-22 shrink-0" aria-label={size.label}>
+        <SelectTrigger
+          variant="well"
+          size="compact"
+          className="w-22 shrink-0"
+          aria-label={size.label}
+        >
           <SelectValue>{size.value} px</SelectValue>
         </SelectTrigger>
         <SelectPopup align="end" alignItemWithTrigger={false}>

From 579d68ebe97ddc9acabefd1136e31ddec88b3f29 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Thu, 5 Nov 2026 16:47:54 +0000
Subject: [PATCH 2/4] fix(web): align connection dialogs with standard dialog
 actions

---
 .../settings/AddEnvironmentDialog.tsx         | 41 ++++++++++---------
 .../settings/AuthorizedClientsSettings.tsx    | 10 ++++-
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/settings/AddEnvironmentDialog.tsx b/apps/web/src/components/settings/AddEnvironmentDialog.tsx
index 21536a2c1b7a4..f6edd1d40e87d 100644
--- a/apps/web/src/components/settings/AddEnvironmentDialog.tsx
+++ b/apps/web/src/components/settings/AddEnvironmentDialog.tsx
@@ -31,6 +31,7 @@ import {
 import {
   Dialog,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogPanel,
   DialogPopup,
@@ -471,15 +472,6 @@ export function AddEnvironmentDialog({
       ) : null}
       {renderRemoteFields()}
       {error ? <p className="text-meta text-destructive">{error}</p> : null}
-      <Button
-        variant="secondary"
-        className="w-full"
-        disabled={isAddingSavedBackend}
-        onClick={() => void handleAddSavedBackend()}
-      >
-        <PlusIcon className="size-3.5" />
-        {isAddingSavedBackend ? "Adding…" : routeTarget ? "Add route" : "Add environment"}
-      </Button>
     </div>
   );
   const renderSshFields = () => (
@@ -590,15 +582,6 @@ export function AddEnvironmentDialog({
             <AlertDescription>{error ?? discoveredSshHostsError}</AlertDescription>
           </Alert>
         ) : null}
-        <Button
-          variant="secondary"
-          className="w-full"
-          disabled={isAddingSavedBackend}
-          onClick={() => void handleAddSavedBackend()}
-        >
-          <PlusIcon className="size-3.5" />
-          {isAddingSavedBackend ? "Adding…" : routeTarget ? "Add route" : "Add environment"}
-        </Button>
       </div>
     </div>
   );
@@ -623,7 +606,7 @@ export function AddEnvironmentDialog({
       <DialogPopup className="max-h-[80dvh] sm:max-w-3xl">
         <DialogHeader>
           <DialogTitle>
-            {routeTarget ? `Add a route to ${routeTarget.label}` : "Add Environment"}
+            {routeTarget ? `Add a route to ${routeTarget.label}` : "Add environment"}
           </DialogTitle>
           <DialogDescription>
             {routeTarget
@@ -633,7 +616,7 @@ export function AddEnvironmentDialog({
         </DialogHeader>
         <DialogPanel>
           <div className="space-y-4">
-            <div className="grid gap-3 sm:grid-cols-2">
+            <div className={cn("grid gap-3", desktopBridge && "sm:grid-cols-2")}>
               {renderConnectionModeCard({
                 mode: "remote",
                 title: "Remote link",
@@ -653,6 +636,24 @@ export function AddEnvironmentDialog({
               {savedBackendMode === "ssh" ? renderSshFields() : renderRemoteModeBody()}
             </AnimatedHeight>
           </div>
+          <DialogFooter variant="bare" className="-mx-5 -mb-4">
+            <Button
+              size="standard"
+              variant="secondary"
+              disabled={isAddingSavedBackend}
+              onClick={() => handleOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              size="standard"
+              disabled={isAddingSavedBackend}
+              onClick={() => void handleAddSavedBackend()}
+            >
+              <PlusIcon className="size-3.5" />
+              {isAddingSavedBackend ? "Adding…" : routeTarget ? "Add route" : "Add environment"}
+            </Button>
+          </DialogFooter>
         </DialogPanel>
       </DialogPopup>
     </Dialog>
diff --git a/apps/web/src/components/settings/AuthorizedClientsSettings.tsx b/apps/web/src/components/settings/AuthorizedClientsSettings.tsx
index f07c52ae32591..e22ab8a72ea84 100644
--- a/apps/web/src/components/settings/AuthorizedClientsSettings.tsx
+++ b/apps/web/src/components/settings/AuthorizedClientsSettings.tsx
@@ -386,11 +386,15 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
                 ) : null}
               </DialogPanel>
               <DialogFooter variant="bare">
-                <Button variant="secondary" onClick={() => setIsRevealDialogOpen(false)}>
+                <Button
+                  size="standard"
+                  variant="secondary"
+                  onClick={() => setIsRevealDialogOpen(false)}
+                >
                   Done
                 </Button>
                 {canCopyToClipboard ? (
-                  <Button variant="secondary" onClick={handleCopyCode}>
+                  <Button size="standard" variant="secondary" onClick={handleCopyCode}>
                     Copy code
                   </Button>
                 ) : null}
@@ -821,6 +825,7 @@ export const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHead
           </DialogPanel>
           <DialogFooter variant="bare">
             <Button
+              size="standard"
               variant="secondary"
               disabled={isCreatingPairingLink}
               onClick={() => setDialogOpen(false)}
@@ -828,6 +833,7 @@ export const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHead
               Cancel
             </Button>
             <Button
+              size="standard"
               disabled={isCreatingPairingLink || selectedScopes.length === 0}
               onClick={() => void handleCreatePairingLink()}
             >

From 8faf2c04ee384b5cccfb116b9102a693a33a8144 Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Thu, 5 Nov 2026 16:48:57 +0000
Subject: [PATCH 3/4] fix(web): use standard actions in settings section
 headers

---
 .../settings/AddEnvironmentDialog.tsx         |  2 +-
 .../settings/AuthorizedClientsSettings.tsx    |  6 +--
 .../settings/DeviceSourcesSettings.tsx        |  4 +-
 .../settings/KeybindingsSettings.tsx          |  2 +-
 .../components/settings/ProjectsSettings.tsx  |  2 +-
 .../settings/ScheduledTasksSettings.tsx       |  2 +-
 .../components/settings/SettingsPanels.tsx    | 37 ++++++++++---------
 .../src/components/settings/ThemeSettings.tsx |  5 +--
 apps/web/src/routes/_chat.settings.tsx        |  1 -
 9 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/components/settings/AddEnvironmentDialog.tsx b/apps/web/src/components/settings/AddEnvironmentDialog.tsx
index f6edd1d40e87d..9165e98c21493 100644
--- a/apps/web/src/components/settings/AddEnvironmentDialog.tsx
+++ b/apps/web/src/components/settings/AddEnvironmentDialog.tsx
@@ -593,7 +593,7 @@ export function AddEnvironmentDialog({
           render={
             <DialogTrigger
               render={
-                <Button size="xs" variant="secondary" aria-label="Add environment">
+                <Button size="standard" variant="secondary" aria-label="Add environment">
                   <PlusIcon className="size-3" />
                   <span>Add environment</span>
                 </Button>
diff --git a/apps/web/src/components/settings/AuthorizedClientsSettings.tsx b/apps/web/src/components/settings/AuthorizedClientsSettings.tsx
index e22ab8a72ea84..64e57af37d694 100644
--- a/apps/web/src/components/settings/AuthorizedClientsSettings.tsx
+++ b/apps/web/src/components/settings/AuthorizedClientsSettings.tsx
@@ -686,7 +686,7 @@ export const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHead
   if (part === "revoke") {
     return (
       <Button
-        size="xs"
+        size="standard"
         variant="destructive-outline"
         disabled={isRevokingOtherClients || !canRevokeOtherClients(clientSessions)}
         onClick={() => void onRevokeOtherClients()}
@@ -700,7 +700,7 @@ export const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHead
     <div className="flex items-center gap-2">
       {pairingDenial !== undefined ? (
         <ManagedControl reason={pairingDenial}>
-          <Button size="xs" variant="default" disabled>
+          <Button size="standard" variant="default" disabled>
             <QrCodeIcon />
             Create pairing link
           </Button>
@@ -721,7 +721,7 @@ export const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHead
         {pairingDenial === undefined ? (
           <DialogTrigger
             render={
-              <Button size="xs" variant="default">
+              <Button size="standard" variant="default">
                 <QrCodeIcon />
                 Create pairing link
               </Button>
diff --git a/apps/web/src/components/settings/DeviceSourcesSettings.tsx b/apps/web/src/components/settings/DeviceSourcesSettings.tsx
index 1eda2afc69247..4c9d4ea8e5c70 100644
--- a/apps/web/src/components/settings/DeviceSourcesSettings.tsx
+++ b/apps/web/src/components/settings/DeviceSourcesSettings.tsx
@@ -527,7 +527,9 @@ export function DeviceSourcesSettings(props: {
   const addMenu = (
     <Menu>
       <MenuTrigger
-        render={<Button size="sm" variant="secondary" disabled={disabled || editing !== null} />}
+        render={
+          <Button size="standard" variant="secondary" disabled={disabled || editing !== null} />
+        }
       >
         <PlusIcon className="size-3.5" /> Add source
         <ChevronDownIcon className="size-3.5" />
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index c8f1069aca358..577c40b927c47 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -1656,7 +1656,7 @@ export function KeybindingsSettingsPanel() {
         <Button
           type="button"
           ref={addButtonRef}
-          size="sm"
+          size="standard"
           disabled={isAddingBinding || !canWriteSettings}
           onClick={() => setIsAddingBinding(true)}
         >
diff --git a/apps/web/src/components/settings/ProjectsSettings.tsx b/apps/web/src/components/settings/ProjectsSettings.tsx
index 5e5761de132c2..ce217b350d904 100644
--- a/apps/web/src/components/settings/ProjectsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectsSettings.tsx
@@ -82,7 +82,7 @@ const SKELETON_LINES = (
 function AddProjectButton({ primary = false }: { primary?: boolean }) {
   return (
     <Button
-      size="sm"
+      size="standard"
       variant={primary ? "default" : "secondary"}
       onClick={() => openCommandPalette({ open: "add-project" })}
     >
diff --git a/apps/web/src/components/settings/ScheduledTasksSettings.tsx b/apps/web/src/components/settings/ScheduledTasksSettings.tsx
index ceb5a17641e89..7d744bdca65f3 100644
--- a/apps/web/src/components/settings/ScheduledTasksSettings.tsx
+++ b/apps/web/src/components/settings/ScheduledTasksSettings.tsx
@@ -502,7 +502,7 @@ export function ScheduledTasksSettings(target: {
   // New task lives on the first environment group's header; the dialog picks the machine.
   const newTaskButton = (
     <Button
-      size="sm"
+      size="standard"
       variant="secondary"
       disabled={!creationEnvironment}
       onClick={() =>
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 668a2134fbf73..ebd7120727dc6 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -763,25 +763,28 @@ function AutoSettleDaysInput({
 }
 
 /** Restores every device setting from the settings and appearance headers. */
-export function RestoreDeviceDefaultsButton({
-  onRestored,
-  compact = false,
-}: {
-  onRestored?: () => void;
-  compact?: boolean;
-}) {
+export function RestoreDeviceDefaultsButton({ onRestored }: { onRestored?: () => void }) {
   const { changedSettingLabels, restoreDefaults } = useSettingsRestore(onRestored);
   return (
-    <Button
-      size={compact ? "icon-sm" : "xs"}
-      variant="ghost"
-      aria-label={compact ? "Restore device defaults" : undefined}
-      disabled={changedSettingLabels.length === 0}
-      onClick={() => void restoreDefaults()}
-    >
-      <RotateCcwIcon className="size-3.5" />
-      {compact ? null : <span>Restore device defaults</span>}
-    </Button>
+    <Tooltip>
+      <TooltipTrigger render={<span className="inline-flex" />}>
+        <Button
+          size="standard"
+          variant="ghost"
+          aria-label="Restore device defaults"
+          disabled={changedSettingLabels.length === 0}
+          onClick={() => void restoreDefaults()}
+        >
+          <RotateCcwIcon className="size-3.5" />
+          <span className="max-sm:sr-only">Restore device defaults</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipPopup side="bottom">
+        {changedSettingLabels.length === 0
+          ? "Device settings already use their defaults."
+          : "Restore device defaults"}
+      </TooltipPopup>
+    </Tooltip>
   );
 }
 
diff --git a/apps/web/src/components/settings/ThemeSettings.tsx b/apps/web/src/components/settings/ThemeSettings.tsx
index 875290bd85a90..a8a6a78631714 100644
--- a/apps/web/src/components/settings/ThemeSettings.tsx
+++ b/apps/web/src/components/settings/ThemeSettings.tsx
@@ -1029,7 +1029,6 @@ export function ThemeLibrary({
   );
 
   return (
-    // Appearance headings carry 24px actions, 10px above the cards (pen eWIa5).
     <div className="space-y-7">
       <div className="space-y-2.5">
         <div className="flex min-h-6 flex-wrap items-center justify-between gap-3">
@@ -1045,12 +1044,12 @@ export function ThemeLibrary({
         <div className="flex min-h-6.5 flex-wrap items-center justify-between gap-3">
           <h3 className="text-title text-dim-foreground">{searchableSetting("theme").title}</h3>
           <div className="flex flex-wrap items-center justify-end gap-2">
-            <Button size="sm" variant="secondary" onClick={() => onImportOpenChange(true)}>
+            <Button size="standard" variant="secondary" onClick={() => onImportOpenChange(true)}>
               <UploadIcon />
               Import
             </Button>
             <Button
-              size="sm"
+              size="standard"
               variant="secondary"
               onClick={() =>
                 openThemeEditor({
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index f1bdf49cbba0f..302b3d114cf33 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -113,7 +113,6 @@ function SettingsContentLayout({ children }: { children: ReactNode }) {
             <div className="relative z-20 ms-auto flex shrink-0 items-center gap-1">
               {location.pathname === "/settings/general" ? (
                 <RestoreDeviceDefaultsButton
-                  compact
                   onRestored={() => setRestoreSignal((value) => value + 1)}
                 />
               ) : null}

From 4703219aa2c1bb746963532f65b07103da82fa3a Mon Sep 17 00:00:00 2001
From: flamboh <oliver.boorstein@gmail.com>
Date: Thu, 5 Nov 2026 16:47:08 +0000
Subject: [PATCH 4/4] fix(web): keep selected settings search results readable

---
 .../web/src/components/settings/SecretSourceInput.tsx |  5 ++++-
 .../src/components/settings/SettingsSidebarNav.tsx    | 11 +++++++----
 apps/web/src/components/ui/select.tsx                 |  1 +
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/settings/SecretSourceInput.tsx b/apps/web/src/components/settings/SecretSourceInput.tsx
index a0b532e3a3582..90f7d9589e9e9 100644
--- a/apps/web/src/components/settings/SecretSourceInput.tsx
+++ b/apps/web/src/components/settings/SecretSourceInput.tsx
@@ -66,6 +66,7 @@ export function SecretSourceSelect(props: {
   readonly sources: ReadonlyArray<Pick<SecretSource, "id" | "label">>;
   readonly label: string;
   readonly disabled?: boolean;
+  readonly settings?: boolean;
   readonly onValueChange: (provider: SecretProviderId | null) => void;
 }) {
   const { value, sources } = props;
@@ -83,7 +84,8 @@ export function SecretSourceSelect(props: {
       {...(props.disabled === undefined ? {} : { disabled: props.disabled })}
     >
       <SelectTrigger
-        size="sm"
+        variant={props.settings ? "well" : "default"}
+        size={props.settings ? "compact" : "sm"}
         className="w-auto min-w-0 shrink-0"
         aria-label={`${props.label} source`}
         title={title}
@@ -149,6 +151,7 @@ export function SecretSourceInput({
         value={provider}
         sources={sources}
         label={label}
+        settings={input.size === "settings"}
         onValueChange={(next) => {
           setRejectedReference(null);
           if (next === null) {
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index f248779bbcd10..371b07072c933 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -358,10 +358,13 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
                     >
                       <SettingsSectionIcon to={item.to} />
                       <span className="min-w-0 flex-1">
-                        <span className="block truncate text-label text-sidebar-foreground">
-                          {item.title}
-                        </span>
-                        <span className="block truncate text-caption text-dim-foreground">
+                        <span className="block truncate text-label text-inherit">{item.title}</span>
+                        <span
+                          className={cn(
+                            "block truncate text-caption",
+                            index === activeResultIndex ? "text-inherit" : "text-dim-foreground",
+                          )}
+                        >
                           {SETTINGS_SECTION_LABELS[item.to]}
                         </span>
                       </span>
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index d0885ffe7d625..f83f9ef2ec718 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -36,6 +36,7 @@ const selectTriggerVariants = cva(
         xs: "h-7 gap-1 rounded-md ps-[calc(--spacing(2)-1px)] pe-[calc(--spacing(1)-0.5px)] text-meta sm:h-6 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
       },
     },
+    compoundVariants: [{ variant: "well", size: "compact", className: "text-prompt" }],
   },
 );