From 21079391c72d1eeaa3c40f1cc5eb3e78abf0a846 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 21:33:02 -0700
Subject: [PATCH] refactor(web): field controls stop restyling Input, Select,
 Combobox and Command (#13206)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/browser/BrowserDeviceToolbar.tsx | 19 ++++----
 .../BranchToolbarBranchSelector.tsx           |  7 +--
 .../BranchToolbarEnvModeSelector.tsx          |  2 +-
 .../BranchToolbarEnvironmentSelector.tsx      |  2 +-
 apps/web/src/components/CommandPalette.tsx    |  2 +-
 .../src/components/CommandPaletteContent.tsx  |  2 +-
 .../src/components/CommandPaletteResults.tsx  |  3 +-
 .../web/src/components/CustomSnoozeDialog.tsx |  1 -
 apps/web/src/components/DiffPanel.tsx         |  3 +-
 apps/web/src/components/LegacySidebar.tsx     |  9 ++--
 apps/web/src/components/Sidebar.tsx           |  1 -
 .../components/chat/ComposerCommandMenu.tsx   |  1 -
 .../components/preview/PreviewChromeRow.tsx   | 45 +++++++++----------
 .../search/ProjectContentSearchDialog.tsx     |  6 ++-
 .../settings/AddProviderInstanceDialog.tsx    |  2 -
 .../settings/ConnectionsSettings.tsx          |  5 +--
 .../settings/KeybindingsSettings.tsx          | 35 +++++++--------
 .../settings/ProjectFaviconPickerDialog.tsx   |  2 +-
 .../settings/ProviderAccentColorPicker.tsx    |  3 +-
 .../settings/ProviderSettingsForm.tsx         |  1 -
 .../components/settings/StorageSettings.tsx   |  2 +-
 .../components/settings/ThemeColorPicker.tsx  |  5 +--
 apps/web/src/components/ui/autocomplete.tsx   |  2 +-
 scripts/lint-restyle-ceiling.ts               |  2 +-
 24 files changed, 72 insertions(+), 90 deletions(-)

diff --git a/apps/web/src/browser/BrowserDeviceToolbar.tsx b/apps/web/src/browser/BrowserDeviceToolbar.tsx
index cf78e5095a385e087869f2dc0ea62bd264fac15c..f84e18d8466987ede3ffdeba746fbd7516037121 100644
--- a/apps/web/src/browser/BrowserDeviceToolbar.tsx
+++ b/apps/web/src/browser/BrowserDeviceToolbar.tsx
@@ -189,10 +189,7 @@ export function BrowserDeviceToolbar({
         <SelectTrigger
           variant="ghost"
           size="xs"
-          className={cn(
-            "shrink-0 justify-between px-1.5 font-medium",
-            width >= 440 ? "w-36" : "w-24",
-          )}
+          className={cn("shrink-0 justify-between", width >= 440 ? "w-36" : "w-24")}
           aria-label="Browser device preset"
         >
           <SelectValue />
@@ -227,7 +224,8 @@ export function BrowserDeviceToolbar({
           nativeInput
           type="number"
           inputMode="numeric"
-          size="sm"
+          size="compact"
+          font="mono"
           min={PREVIEW_VIEWPORT_MIN_DIMENSION}
           max={PREVIEW_VIEWPORT_MAX_DIMENSION}
           value={presentedSize.width}
@@ -245,8 +243,8 @@ export function BrowserDeviceToolbar({
           aria-label="Viewport width"
           aria-invalid={!customValid}
           className={cn(
-            "h-6 rounded-md text-center tabular-nums [&_[data-slot=input]]:h-full [&_[data-slot=input]]:px-1 [&_[data-slot=input]]:text-xs [&_[data-slot=input]]:leading-none [&_[data-slot=input]::-webkit-inner-spin-button]:appearance-none [&_[data-slot=input]]:[appearance:textfield]",
-            width >= 360 ? "w-14" : "w-11",
+            "text-center [&_[data-slot=input]::-webkit-inner-spin-button]:appearance-none [&_[data-slot=input]]:[appearance:textfield]",
+            width >= 360 ? "w-14" : "w-13",
           )}
         />
         <span className="text-xs text-muted-foreground">×</span>
@@ -254,7 +252,8 @@ export function BrowserDeviceToolbar({
           nativeInput
           type="number"
           inputMode="numeric"
-          size="sm"
+          size="compact"
+          font="mono"
           min={PREVIEW_VIEWPORT_MIN_DIMENSION}
           max={PREVIEW_VIEWPORT_MAX_DIMENSION}
           value={presentedSize.height}
@@ -272,8 +271,8 @@ export function BrowserDeviceToolbar({
           aria-label="Viewport height"
           aria-invalid={!customValid}
           className={cn(
-            "h-6 rounded-md text-center tabular-nums [&_[data-slot=input]]:h-full [&_[data-slot=input]]:px-1 [&_[data-slot=input]]:text-xs [&_[data-slot=input]]:leading-none [&_[data-slot=input]::-webkit-inner-spin-button]:appearance-none [&_[data-slot=input]]:[appearance:textfield]",
-            width >= 360 ? "w-14" : "w-11",
+            "text-center [&_[data-slot=input]::-webkit-inner-spin-button]:appearance-none [&_[data-slot=input]]:[appearance:textfield]",
+            width >= 360 ? "w-14" : "w-13",
           )}
         />
       </form>
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
index 9ca02389b192b78dd544024ad0e33cf86726e29b..b0596811f664163e3be5d39ac11da39e71bf54f8 100644
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -704,7 +704,6 @@ export function BranchToolbarBranchSelector({
           key={itemValue}
           index={index}
           value={itemValue}
-          className="pe-2"
           onClick={() => selectPickerItem(itemValue)}
         >
           <div className="flex min-w-0 items-center gap-2 py-1">
@@ -726,7 +725,6 @@ export function BranchToolbarBranchSelector({
           key={itemValue}
           index={index}
           value={itemValue}
-          className="pe-1.5"
           onClick={() => selectPickerItem(itemValue)}
         >
           <span className="truncate">Create new ref &quot;{newRefName}&quot;</span>
@@ -754,7 +752,6 @@ export function BranchToolbarBranchSelector({
         key={itemValue}
         index={index}
         value={itemValue}
-        className="pe-1.5"
         onClick={() => selectPickerItem(itemValue)}
         onContextMenu={(event) => handleBranchContextMenu(event, itemValue)}
       >
@@ -809,10 +806,10 @@ export function BranchToolbarBranchSelector({
           onContextMenu={(event) => handleBranchContextMenu(event, resolvedActiveBranch)}
         >
           <ComboboxTrigger
-            render={<Button variant="ghost" size="xs" />}
+            render={<ComposerControl size="xs" />}
             // No press-scale: the popup aligns live to this trigger, so a
             // momentary 0.97 shrink would drag the open popup ~3px sideways.
-            className="min-w-0 max-w-full font-normal text-muted-foreground/70 text-xs! hover:text-foreground/80 active:scale-100"
+            className="min-w-0 max-w-full active:scale-100"
             disabled={isInitialBranchesLoadPending || isBranchActionPending}
           >
             <GitBranchIcon className="size-3 shrink-0 opacity-70" />
diff --git a/apps/web/src/components/BranchToolbarEnvModeSelector.tsx b/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
index 0ec794b2970c646663ca33ede648dcfe6215065a..1b8b81cfcd74d2fafa81fd48e2acbf8c91a851b9 100644
--- a/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
+++ b/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
@@ -110,7 +110,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
             <SelectTrigger
               variant="ghost"
               size="xs"
-              className="min-w-0 shrink font-normal text-xs!"
+              className="min-w-0 shrink"
               aria-label="Workspace"
               data-composer-shortcut="composer.workspace"
               data-composer-context-control
diff --git a/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx b/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
index a29bb92e83d00d5c52a5138a91f121eb3c623c88..8ab7577e8002d7355a0772ef106838ed3e716623 100644
--- a/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
+++ b/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
@@ -102,7 +102,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
             <SelectTrigger
               variant="ghost"
               size="xs"
-              className="min-w-0 max-w-full font-normal text-xs!"
+              className="min-w-0 max-w-full"
               aria-label="Run on"
               data-composer-shortcut="composer.host"
               data-composer-context-control
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 86be2f7e5e627683934335e090b765e0975f9491..118ac9d1c9e0463dacad103e3ca1eef3ac9eabad 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -650,7 +650,7 @@ function CommandPaletteDialog(props: {
             ? "Search project contents"
             : "Command palette"
       }
-      className={cn("overflow-hidden p-0", props.mode === "content" && "h-105")}
+      className={cn("overflow-hidden", props.mode === "content" && "h-105")}
       data-command-palette="true"
       data-palette-mode={props.mode}
       data-testid="command-palette"
diff --git a/apps/web/src/components/CommandPaletteContent.tsx b/apps/web/src/components/CommandPaletteContent.tsx
index a21de9a3c650d7218b684cff7a2a618f072c69b4..e9e6149b6cd79470c1471cf215bca285b14a2203 100644
--- a/apps/web/src/components/CommandPaletteContent.tsx
+++ b/apps/web/src/components/CommandPaletteContent.tsx
@@ -50,7 +50,7 @@ export function CommandPaletteContent({
           {inputAccessory}
         </div>
         <CommandPanel className={panelClassName}>{children}</CommandPanel>
-        <CommandFooter className="gap-3 max-sm:flex-col max-sm:items-start">
+        <CommandFooter className="max-sm:flex-col max-sm:items-start">
           <div className="flex items-center gap-3">
             <KbdGroup>
               <Kbd>
diff --git a/apps/web/src/components/CommandPaletteResults.tsx b/apps/web/src/components/CommandPaletteResults.tsx
index b9cb0c6269c8142a97d1a32a17fe773dd15d1e6f..b94707f5eca6782e9a92c90c18bfa06ed39cefc6 100644
--- a/apps/web/src/components/CommandPaletteResults.tsx
+++ b/apps/web/src/components/CommandPaletteResults.tsx
@@ -41,7 +41,7 @@ export function CommandPaletteResults(props: CommandPaletteResultsProps) {
     <CommandList>
       {props.groups.map((group) => (
         <CommandGroup items={group.items} key={group.value}>
-          <CommandGroupLabel className="ps-[9px]">{group.label}</CommandGroupLabel>
+          <CommandGroupLabel>{group.label}</CommandGroupLabel>
           <CommandCollection>
             {(item) =>
               item.disabled ? (
@@ -109,7 +109,6 @@ function CommandPaletteResultRow(props: {
     <CommandItem
       value={props.item.value}
       active={props.isActive}
-      className="gap-2"
       onMouseDown={(event) => {
         event.preventDefault();
       }}
diff --git a/apps/web/src/components/CustomSnoozeDialog.tsx b/apps/web/src/components/CustomSnoozeDialog.tsx
index f944d6af604260981c4daec4288a147ecf4379ca..4cd3be8a096e3165fb1ffd10e3dcc9b464aef9b1 100644
--- a/apps/web/src/components/CustomSnoozeDialog.tsx
+++ b/apps/web/src/components/CustomSnoozeDialog.tsx
@@ -169,7 +169,6 @@ function CustomSnoozeDialog() {
                 ) : (
                   <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                     <NumberField
-                      className="gap-1.5"
                       id={`${id}-amount`}
                       min={0}
                       step="any"
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index a39774ba0b10d5d99dd491731509fb9b1ee59e1e..8c1f6791a2d581f8ccbaedad12a7103b6adb624f 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -749,7 +749,8 @@ export default function DiffPanel({
               }}
             >
               <ComboboxTrigger
-                className="inline-flex min-w-0 max-w-48 items-center gap-1 overflow-hidden rounded-md px-1.5 py-1 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                render={<Button variant="ghost-muted" size="xs" />}
+                className="min-w-0 max-w-48"
                 aria-label={`Change comparison target. Currently ${selectedGitSource.baseRef}`}
               >
                 <span className="min-w-0 truncate">{selectedGitSource.baseRef}</span>
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index fc8bf99a8098963dd70287953b299966ff188aec..2373ed90cf6ae52b01ac9afbaab565a30ece5565 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -2784,7 +2784,7 @@ function ProjectSortMenu({
           <div className="px-2 py-1">
             <NumberField
               aria-label="Visible thread count"
-              className="w-28 gap-0"
+              className="w-28"
               max={MAX_SIDEBAR_THREAD_PREVIEW_COUNT}
               min={MIN_SIDEBAR_THREAD_PREVIEW_COUNT}
               onValueChange={handleThreadPreviewCountChange}
@@ -2792,14 +2792,13 @@ function ProjectSortMenu({
               step={1}
               value={threadPreviewCount}
             >
-              <NumberFieldGroup className="h-7 rounded-md sm:h-6.5">
+              <NumberFieldGroup>
                 <NumberFieldDecrement
                   aria-label="Decrease visible thread count"
-                  className="px-2 sm:px-2 [&_svg]:size-3.5"
+                  className="[&_svg]:size-3.5"
                 />
                 <NumberFieldInput
                   aria-label="Visible thread count"
-                  className="h-7 w-9 grow-0 px-0 text-xs leading-7 sm:h-6.5 sm:leading-6.5"
                   inputMode="numeric"
                   onKeyDownCapture={(event) => {
                     event.stopPropagation();
@@ -2807,7 +2806,7 @@ function ProjectSortMenu({
                 />
                 <NumberFieldIncrement
                   aria-label="Increase visible thread count"
-                  className="px-2 sm:px-2 [&_svg]:size-3.5"
+                  className="[&_svg]:size-3.5"
                 />
               </NumberFieldGroup>
             </NumberField>
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 2e18d089412978136b6e37ad95861d8958db6492..1df381470e8d532baced9f2d5206ed2515b3f895 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -4483,7 +4483,6 @@ export default function Sidebar() {
                             key={item.value}
                             hideIndicator
                             value={item}
-                            className="font-medium"
                             onContextMenu={(event) => {
                               if (project) handleProjectSettings(event, project);
                             }}
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 7c23a6059d3dd7296d22d17631b9eb4a355e04c1..4f0cabf8b4b412150c95a6707efee90bf6b79b31 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -162,7 +162,6 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
       value={props.item.id}
       data-composer-item-id={props.item.id}
       active={props.isActive}
-      className="gap-3 rounded-lg px-3 py-2!"
       onMouseMove={() => {
         if (!props.isActive) props.onHighlight(props.item.id);
       }}
diff --git a/apps/web/src/components/preview/PreviewChromeRow.tsx b/apps/web/src/components/preview/PreviewChromeRow.tsx
index 7ca0c496a04b6aa9eb425c1013205dfd74d5395e..0fd12aecb8bf86a8c36f089fd9775467dfad7cff 100644
--- a/apps/web/src/components/preview/PreviewChromeRow.tsx
+++ b/apps/web/src/components/preview/PreviewChromeRow.tsx
@@ -181,11 +181,6 @@ export function PreviewChromeRow({
                 <InputGroupInput
                   ref={inputRef}
                   value={inputFocused ? draft : url}
-                  className={cn(
-                    onOpenInBrowser &&
-                      !inputFocused &&
-                      "group-hover/address:pe-7 transition-[padding]",
-                  )}
                   onChange={(event) => setDraft(event.target.value)}
                   onFocus={() => {
                     setDraft(url);
@@ -213,26 +208,26 @@ export function PreviewChromeRow({
             />
           </Tooltip>
           {onOpenInBrowser && !inputFocused ? (
-            <InputGroupAddon
-              align="inline-end"
-              className="pointer-events-none absolute inset-y-0 right-0 opacity-0 transition-opacity group-hover/address:pointer-events-auto group-hover/address:opacity-100"
-            >
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Button
-                      variant="ghost"
-                      size="icon-xs"
-                      onClick={onOpenInBrowser}
-                      aria-label="Open in system browser"
-                      type="button"
-                    />
-                  }
-                >
-                  <ExternalLink />
-                </TooltipTrigger>
-                <TooltipPopup>Open in system browser</TooltipPopup>
-              </Tooltip>
+            <InputGroupAddon align="inline-end">
+              {/* Revealed on hover so a resting address bar reads as plain text. */}
+              <span className="pointer-events-none flex opacity-0 transition-opacity focus-within:pointer-events-auto focus-within:opacity-100 group-hover/address:pointer-events-auto group-hover/address:opacity-100">
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        onClick={onOpenInBrowser}
+                        aria-label="Open in system browser"
+                        type="button"
+                      />
+                    }
+                  >
+                    <ExternalLink />
+                  </TooltipTrigger>
+                  <TooltipPopup>Open in system browser</TooltipPopup>
+                </Tooltip>
+              </span>
             </InputGroupAddon>
           ) : null}
         </InputGroup>
diff --git a/apps/web/src/components/search/ProjectContentSearchDialog.tsx b/apps/web/src/components/search/ProjectContentSearchDialog.tsx
index f8707dbf68f3044c164fcbef4cbcca138f5be487..3c83c1f371542e36e6bb09f33e2bc6ee5048e923 100644
--- a/apps/web/src/components/search/ProjectContentSearchDialog.tsx
+++ b/apps/web/src/components/search/ProjectContentSearchDialog.tsx
@@ -89,11 +89,13 @@ function EmptyContentSearchDialog() {
       footerActionLabel="Open file"
       inputProps={{ disabled: true, placeholder: "Search project contents…" }}
       mode="none"
-      panelClassName="flex min-h-0 flex-1 items-center justify-center px-6 text-center text-sm text-muted-foreground"
+      panelClassName="flex min-h-0 flex-1 items-center justify-center"
       testId="project-content-search"
       value=""
     >
-      Open a project to search its files.
+      <p className="px-6 text-center text-muted-foreground text-sm">
+        Open a project to search its files.
+      </p>
     </CommandPaletteContent>
   );
 }
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index 65eb8ad7699b7df3b72fe89e87a519c76300f0ca..0e92071e1161497e6e9148a0c46d8b44106d0e09 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -306,7 +306,6 @@ export function AddProviderInstanceDialog({
           <label className={cn("grid gap-2", wizardStep !== 1 && "hidden")}>
             <span className="text-xs font-medium text-foreground">Label</span>
             <Input
-              className="bg-background"
               placeholder="e.g. Work"
               value={label}
               onChange={(event) => setLabel(event.target.value)}
@@ -319,7 +318,6 @@ export function AddProviderInstanceDialog({
           <label className={cn("grid gap-2", wizardStep !== 1 && "hidden")}>
             <span className="text-xs font-medium text-foreground">Instance ID</span>
             <Input
-              className="bg-background"
               placeholder={`${driver}_work`}
               value={instanceId}
               onChange={(event) => {
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index c32051ee75138796decda02e9fb28bf798a14c6b..48e9529a2df4ad95afc574a9c9671d1fe61f3ebd 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -833,7 +833,6 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
                   readOnly
                   value={revealValue}
                   rows={isRevealValueUrl ? 4 : 3}
-                  className="text-xs leading-relaxed"
                   onFocus={(event) => event.currentTarget.select()}
                   onClick={(event) => event.currentTarget.select()}
                 />
@@ -2734,7 +2733,7 @@ export function ConnectionsSettings() {
                         <AutocompleteItem
                           key={`${target.alias}:${target.hostname}:${target.port ?? ""}`}
                           value={target}
-                          className="h-8 min-h-8 gap-2 whitespace-nowrap"
+                          className="h-8 min-h-8 whitespace-nowrap"
                         >
                           <span className="min-w-0 truncate text-sm font-medium">
                             {target.alias}
@@ -2754,7 +2753,7 @@ export function ConnectionsSettings() {
                     })}
                   </AutocompleteList>
                 ) : (
-                  <AutocompleteEmpty className="break-all px-3 py-2 text-xs">
+                  <AutocompleteEmpty className="break-all">
                     No hosts match "{savedBackendSshHost.trim()}".
                   </AutocompleteEmpty>
                 )}
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index 4cd64438e0389bfa9fef20b35bb5cb3a0d3974f4..bc8e4e9df31c9a75e538008b0cce5447930a7913 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -42,6 +42,7 @@ import { useSettingsScope } from "./SettingsScopeContext";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../ui/input-group";
 import { Kbd, KbdGroup } from "../ui/kbd";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
@@ -143,9 +144,11 @@ function ExpandableHeaderSearch({
   }
 
   return (
-    <div className="relative">
-      <SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-3 -translate-y-1/2 text-muted-foreground" />
-      <Input
+    <InputGroup className="w-44">
+      <InputGroupAddon>
+        <SearchIcon aria-hidden className="size-3" />
+      </InputGroupAddon>
+      <InputGroupInput
         ref={inputRef}
         autoFocus
         type="search"
@@ -163,10 +166,9 @@ function ExpandableHeaderSearch({
         }}
         placeholder="Search keybindings"
         aria-label="Search keybindings"
-        className="w-44 [&_[data-slot=input]]:pl-7"
         size="sm"
       />
-    </div>
+    </InputGroup>
   );
 }
 
@@ -319,7 +321,7 @@ function WhenVariableSelect({
   return (
     <Select value={value} onValueChange={(nextValue) => nextValue && onChange(nextValue)}>
       <SelectTrigger size="compact" className="min-w-0 flex-1">
-        <SelectValue placeholder="Condition" className="leading-7" />
+        <SelectValue placeholder="Condition" />
         {unknownIdentifiers && unknownIdentifiers.length > 0 ? (
           <UnknownWhenVariableWarning identifiers={unknownIdentifiers} focusable={false} />
         ) : null}
@@ -649,25 +651,22 @@ function WhenExpressionBuilder({
       </div>
 
       <div className="space-y-1.5">
-        <div className="relative">
-          <Input
+        <InputGroup>
+          <InputGroupInput
             value={expressionDraft}
             onChange={(event) => updateExpressionDraft(event.currentTarget.value)}
             placeholder="Always"
             aria-invalid={Boolean(parseError)}
             aria-label="When expression"
-            className={cn(
-              "h-7 rounded-md font-mono text-[12px] leading-7 sm:h-7 sm:leading-7",
-              unknownIdentifiers.length > 0 && "pr-9",
-              parseError && "border-destructive/70 focus-visible:border-destructive",
-            )}
+            size="compact"
+            font="mono"
           />
           {unknownIdentifiers.length > 0 ? (
-            <span className="absolute inset-y-0 right-2 flex items-center">
+            <InputGroupAddon align="inline-end">
               <UnknownWhenVariableWarning identifiers={unknownIdentifiers} />
-            </span>
+            </InputGroupAddon>
           ) : null}
-        </div>
+        </InputGroup>
         {parseError ? (
           <div className="flex items-center gap-1.5 text-[11px] text-destructive">
             <CircleXIcon className="size-3.5" />
@@ -858,7 +857,7 @@ function KeybindingKeyControl({
           placeholder={isRecording ? "Press shortcut" : "Unassigned"}
           size="sm"
           font="mono"
-          className={cn("w-44", isRecording && "border-primary/70 bg-primary/5")}
+          className="w-44"
           onFocus={() => setDraft({ isRecording: true })}
           onBlur={() => setDraft({ isRecording: false })}
           onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
@@ -1168,7 +1167,7 @@ function NewKeybindingKeyInput({
       placeholder={draft.isRecording ? "Press shortcut" : "Unassigned"}
       size="sm"
       font="mono"
-      className={cn(draft.isRecording && "border-primary/70 bg-primary/5", className)}
+      className={className}
       onFocus={() => draft.setDraft({ isRecording: true })}
       onBlur={() => draft.setDraft({ isRecording: false })}
       onChange={(event) => draft.setDraft({ keyDraft: event.currentTarget.value })}
diff --git a/apps/web/src/components/settings/ProjectFaviconPickerDialog.tsx b/apps/web/src/components/settings/ProjectFaviconPickerDialog.tsx
index aa4d291851c7aa77d75385db7e18db899248ff50..a0971db3ac25a817e8a53f7e3460597df6201dfa 100644
--- a/apps/web/src/components/settings/ProjectFaviconPickerDialog.tsx
+++ b/apps/web/src/components/settings/ProjectFaviconPickerDialog.tsx
@@ -71,7 +71,7 @@ export function ProjectFaviconPickerDialog(props: {
       {props.open ? (
         <CommandDialogPopup
           aria-label="Choose project icon"
-          className="overflow-hidden p-0"
+          className="overflow-hidden"
           onBackdropPointerDown={() => props.onOpenChange(false)}
         >
           <CommandPaletteContent
diff --git a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
index 82e3d76f7220acc28a10d81514c111ff99934284..1e49dcab325298620f3f48fbfe6f9445a30bb644 100644
--- a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
+++ b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
@@ -46,7 +46,7 @@ function ProviderCustomColorPanel(props: {
         />
         <Input
           nativeInput
-          size="sm"
+          size="compact"
           value={hexDraft ?? currentColor}
           onChange={(event) => {
             const nextColor = event.currentTarget.value;
@@ -57,7 +57,6 @@ function ProviderCustomColorPanel(props: {
           }}
           onBlur={() => setHexDraft(null)}
           font="mono"
-          className="text-xs"
           aria-label="Custom hex accent color"
           spellCheck={false}
         />
diff --git a/apps/web/src/components/settings/ProviderSettingsForm.tsx b/apps/web/src/components/settings/ProviderSettingsForm.tsx
index d0c366831bb02643845a824949c46641970235cd..d49c05c9660fd6db94f8cb84e88d44af6b720057 100644
--- a/apps/web/src/components/settings/ProviderSettingsForm.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsForm.tsx
@@ -388,7 +388,6 @@ function ProviderSettingsFieldRow({
         ) : (
           <Input
             id={inputId}
-            className="bg-background"
             type={type}
             autoComplete={field.control === "password" ? "off" : undefined}
             value={readProviderConfigString(value, field.key)}
diff --git a/apps/web/src/components/settings/StorageSettings.tsx b/apps/web/src/components/settings/StorageSettings.tsx
index f5aee54ccea5952dd61cae0fdc3e789060a528cc..360979eead7a3c0e07e7215404529a69a5421d7d 100644
--- a/apps/web/src/components/settings/StorageSettings.tsx
+++ b/apps/web/src/components/settings/StorageSettings.tsx
@@ -62,7 +62,7 @@ function RetentionControl({
             <NumberFieldInput
               aria-label={`${label} in days`}
               size={new Intl.NumberFormat().format(draft ?? value).length}
-              className="field-sizing-content w-auto min-w-[1ch] grow-0 text-right in-data-[size=sm]:px-1"
+              className="field-sizing-content w-auto min-w-[1ch] grow-0 text-right"
             />
             <span aria-hidden="true" className="self-center pr-2 text-xs">
               days
diff --git a/apps/web/src/components/settings/ThemeColorPicker.tsx b/apps/web/src/components/settings/ThemeColorPicker.tsx
index a1d2cde90b025e4ed40ac86daa25581900e04ac4..5def3f06606942d9cb0a4e3c7fcd293c85ab3216 100644
--- a/apps/web/src/components/settings/ThemeColorPicker.tsx
+++ b/apps/web/src/components/settings/ThemeColorPicker.tsx
@@ -353,15 +353,14 @@ export const ThemeColorField = memo(function ThemeColorField({
         <Input
           aria-invalid={!isColorValue}
           aria-label={`${label} hex value`}
-          className="w-28 shrink-0 rounded-md border-0 bg-black/10 text-xs text-foreground shadow-none focus-within:bg-black/15 focus-within:ring-0 dark:bg-black/20 dark:focus-within:bg-black/25 [&_[data-slot=input]]:text-right"
+          className="w-28 shrink-0 [&_[data-slot=input]]:text-right"
           font="mono"
           id={`${role}-hex`}
           nativeInput
           onChange={(event) => onChange(role, event.currentTarget.value)}
           onFocus={() => onSelect?.(role)}
           onPointerDown={() => onSelect?.(role)}
-          size="sm"
-          unstyled
+          size="compact"
           value={editorValue}
         />
       </div>
diff --git a/apps/web/src/components/ui/autocomplete.tsx b/apps/web/src/components/ui/autocomplete.tsx
index 8a951337f261412873ac0c4337cd15b0fff4d222..8251d8c24b7c6690a66f66a7354db270fcbaae61 100644
--- a/apps/web/src/components/ui/autocomplete.tsx
+++ b/apps/web/src/components/ui/autocomplete.tsx
@@ -125,7 +125,7 @@ function AutocompleteItem({ className, children, ...props }: AutocompletePrimiti
   return (
     <AutocompletePrimitive.Item
       className={cn(
-        "flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none hover:bg-accent data-disabled:pointer-events-none data-selected:bg-accent/50 data-selected:text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-accent [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none hover:bg-accent data-disabled:pointer-events-none data-selected:bg-accent/50 data-selected:text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-accent [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       data-slot="autocomplete-item"
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index fc11a8e8fb8b6a8a30ea0902f7359ba385a99407..8041a18f3532a2480029de111624527945cec975 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 499;
+export const RESTYLE_CEILING = 402;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0