fix(web): make settings rows and dialogs consistent

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>

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}

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>
   );
@@ -610,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>
@@ -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>

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}

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}>

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}
@@ -682,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()}
@@ -696,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>
@@ -717,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>
@@ -821,13 +825,15 @@ export const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHead
           </DialogPanel>
           <DialogFooter variant="bare">
             <Button
+              size="standard"
               variant="secondary"
               disabled={isCreatingPairingLink}
               onClick={() => setDialogOpen(false)}
             >
               Cancel
             </Button>
             <Button
+              size="standard"
               disabled={isCreatingPairingLink || selectedScopes.length === 0}
               onClick={() => void handleCreatePairingLink()}
             >

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"
             >

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"

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}

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}

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" />

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">

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"