From 7b54af90f79a6858f75ff86d42a2f083d4edfa2a Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:13 -0700
Subject: [PATCH] refactor(web): add font="mono" to Input (#13027)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/device/DeviceToolsPanel.tsx | 11 +++++++----
 .../components/settings/CustomModelEditor.tsx  |  6 ++++--
 .../settings/KeybindingsSettings.tsx           | 18 ++++++++----------
 .../settings/ProviderAccentColorPicker.tsx     |  3 ++-
 .../settings/ProviderInstanceCard.tsx          |  6 ++++--
 .../components/settings/ThemeColorPicker.tsx   |  3 ++-
 apps/web/src/components/ui/input.tsx           |  4 ++++
 .../components/usage/UsagePriceOverrides.tsx   |  2 +-
 scripts/lint-restyle-ceiling.ts                |  2 +-
 9 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/device/DeviceToolsPanel.tsx b/apps/web/src/components/device/DeviceToolsPanel.tsx
index 79f84529aebb4e399c19a37fce2c0798637de9ca..39b8123cd03b9ae8e3c67ec435006c4eae151fe5 100644
--- a/apps/web/src/components/device/DeviceToolsPanel.tsx
+++ b/apps/web/src/components/device/DeviceToolsPanel.tsx
@@ -493,7 +493,8 @@ function SubmitRow(props: {
     >
       <Input
         size="compact"
-        className="min-w-0 flex-1 font-mono"
+        font="mono"
+        className="min-w-0 flex-1"
         placeholder={props.placeholder}
         value={value}
         disabled={props.disabled}
@@ -530,7 +531,8 @@ function LocationSection(props: {
       <div className="flex gap-1.5">
         <Input
           size="compact"
-          className="min-w-0 flex-1 font-mono"
+          font="mono"
+          className="min-w-0 flex-1"
           placeholder="Latitude"
           inputMode="decimal"
           value={latitude}
@@ -539,7 +541,8 @@ function LocationSection(props: {
         />
         <Input
           size="compact"
-          className="min-w-0 flex-1 font-mono"
+          font="mono"
+          className="min-w-0 flex-1"
           placeholder="Longitude"
           inputMode="decimal"
           value={longitude}
@@ -619,7 +622,7 @@ function PermissionsSection(props: {
     <Section title="Permissions">
       <Input
         size="compact"
-        className="font-mono"
+        font="mono"
         placeholder={props.defaultAppId || "App ID"}
         value={appId}
         disabled={props.disabled}
diff --git a/apps/web/src/components/settings/CustomModelEditor.tsx b/apps/web/src/components/settings/CustomModelEditor.tsx
index 9fa65e0bf23ef33bb120618bcd4ed06b4bda6f4f..d1a32c3fd7bdd0b40f34882cd8be54895a0c8888 100644
--- a/apps/web/src/components/settings/CustomModelEditor.tsx
+++ b/apps/web/src/components/settings/CustomModelEditor.tsx
@@ -154,7 +154,8 @@ export function CustomModelEditor({
         value={choice.id}
         onChange={(event) => updateChoice(descriptor.key, choice.key, { id: event.target.value })}
         placeholder="value"
-        className="w-28 font-mono"
+        font="mono"
+        className="w-28"
         spellCheck={false}
         aria-label="Choice value"
       />
@@ -230,7 +231,8 @@ export function CustomModelEditor({
             value={descriptor.id}
             onChange={(event) => updateDescriptor(descriptor.key, { id: event.target.value })}
             placeholder="optionId"
-            className="w-36 font-mono"
+            font="mono"
+            className="w-36"
             spellCheck={false}
             aria-label="Option id"
           />
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index 4a22680b63f4e8d87481d8dc2005bc05b64e27d4..8371d0d9cdffebc31c20214a6e2b689b49973b0b 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -320,7 +320,7 @@ function WhenVariableSelect({
 
   return (
     <Select value={value} onValueChange={(nextValue) => nextValue && onChange(nextValue)}>
-      <SelectTrigger size="compact" className="min-w-0 flex-1 font-mono">
+      <SelectTrigger size="compact" className="min-w-0 flex-1">
         <SelectValue placeholder="Condition" className="leading-7" />
         {unknownIdentifiers && unknownIdentifiers.length > 0 ? (
           <UnknownWhenVariableWarning identifiers={unknownIdentifiers} focusable={false} />
@@ -333,11 +333,7 @@ function WhenVariableSelect({
         className="max-h-72 w-fit min-w-44"
       >
         {options.map((option) => (
-          <SelectItem
-            key={option}
-            value={option}
-            className="min-h-7 w-full py-1 font-mono text-[12px]"
-          >
+          <SelectItem key={option} value={option} className="min-h-7 w-full py-1 text-[12px]">
             <span className="truncate">{option}</span>
           </SelectItem>
         ))}
@@ -546,10 +542,10 @@ function WhenExpressionNodeEditor({
             popupClassName="w-fit"
             className="w-fit min-w-24"
           >
-            <SelectItem value="and" className="min-h-7 py-1 font-mono text-[12px]">
+            <SelectItem value="and" className="min-h-7 py-1 text-[12px]">
               and
             </SelectItem>
-            <SelectItem value="or" className="min-h-7 py-1 font-mono text-[12px]">
+            <SelectItem value="or" className="min-h-7 py-1 text-[12px]">
               or
             </SelectItem>
           </SelectContent>
@@ -877,7 +873,8 @@ function KeybindingKeyControl({
           value={isRecording ? "" : keyDraft}
           placeholder={isRecording ? "Press shortcut" : "Unassigned"}
           size="sm"
-          className={cn("w-44 font-mono", isRecording && "border-primary/70 bg-primary/5")}
+          font="mono"
+          className={cn("w-44", isRecording && "border-primary/70 bg-primary/5")}
           onFocus={() => setDraft({ isRecording: true })}
           onBlur={() => setDraft({ isRecording: false })}
           onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
@@ -1190,7 +1187,8 @@ function NewKeybindingKeyInput({
       value={draft.isRecording ? "" : draft.keyDraft}
       placeholder={draft.isRecording ? "Press shortcut" : "Unassigned"}
       size="sm"
-      className={cn("font-mono", draft.isRecording && "border-primary/70 bg-primary/5", className)}
+      font="mono"
+      className={cn(draft.isRecording && "border-primary/70 bg-primary/5", 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/ProviderAccentColorPicker.tsx b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
index 500f3c0a7cb30d3cf75af66d3cbdc570104a2e35..82e3d76f7220acc28a10d81514c111ff99934284 100644
--- a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
+++ b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
@@ -56,7 +56,8 @@ function ProviderCustomColorPanel(props: {
             props.onCommit(nextColor);
           }}
           onBlur={() => setHexDraft(null)}
-          className="font-mono text-xs"
+          font="mono"
+          className="text-xs"
           aria-label="Custom hex accent color"
           spellCheck={false}
         />
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index ed8f5893f501a048daf0f9c1c228dffe4ca2ccc5..eebd871735df333614bd854619d36e8cc22c9237 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -268,7 +268,8 @@ function ProviderEnvironmentSection(props: {
             <div key={variable.id} className="flex min-w-0 flex-wrap items-center gap-1.5">
               <DraftInput
                 size="sm"
-                className="w-full min-w-0 font-mono sm:w-44 sm:shrink-0"
+                font="mono"
+                className="w-full min-w-0 sm:w-44 sm:shrink-0"
                 value={variable.name}
                 onCommit={(name) => updateVariable(variable.id, { name: name.trim() })}
                 placeholder="VARIABLE_NAME"
@@ -280,7 +281,8 @@ function ProviderEnvironmentSection(props: {
               </span>
               <DraftInput
                 size="sm"
-                className="min-w-0 flex-1 font-mono"
+                font="mono"
+                className="min-w-0 flex-1"
                 value={variable.valueRedacted ? "" : variable.value}
                 onCommit={(value) => updateVariable(variable.id, { value })}
                 type={variable.sensitive ? "password" : undefined}
diff --git a/apps/web/src/components/settings/ThemeColorPicker.tsx b/apps/web/src/components/settings/ThemeColorPicker.tsx
index 7ddb89fa89aa85833bc1c4c2b170b4355d062a90..a1d2cde90b025e4ed40ac86daa25581900e04ac4 100644
--- a/apps/web/src/components/settings/ThemeColorPicker.tsx
+++ b/apps/web/src/components/settings/ThemeColorPicker.tsx
@@ -353,7 +353,8 @@ 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 font-mono 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 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"
+          font="mono"
           id={`${role}-hex`}
           nativeInput
           onChange={(event) => onChange(role, event.currentTarget.value)}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index cae3dfe628527958057845ea7a55029acee902cb..a5810308b6e8de261645a79292688e592157bca6 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -7,6 +7,8 @@ import { cn } from "~/lib/utils";
 
 type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size"> & {
   size?: "sm" | "compact" | "default" | "lg" | number;
+  /** Monospace with tabular digits, for paths, commands, colors and numbers. */
+  font?: "default" | "mono";
   unstyled?: boolean;
   nativeInput?: boolean;
 };
@@ -14,6 +16,7 @@ type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputEleme
 function Input({
   className,
   size = "default",
+  font = "default",
   unstyled = false,
   nativeInput = false,
   ...props
@@ -63,6 +66,7 @@ function Input({
           !unstyled &&
             size === "compact" &&
             "rounded-md before:rounded-[calc(var(--radius-md)-1px)]",
+          font === "mono" && "font-mono tabular-nums",
           className,
         ) || undefined
       }
diff --git a/apps/web/src/components/usage/UsagePriceOverrides.tsx b/apps/web/src/components/usage/UsagePriceOverrides.tsx
index 9f3e5697b5ee2ddbd7c1d3ec714e55515d9fb4e7..6007de4c2fe6513145db446fb3af2b3964f9c1f8 100644
--- a/apps/web/src/components/usage/UsagePriceOverrides.tsx
+++ b/apps/web/src/components/usage/UsagePriceOverrides.tsx
@@ -429,7 +429,7 @@ export function UsagePriceOverrides({
                                     }
                                     autoComplete="off"
                                     disabled={locked}
-                                    className="tabular-nums"
+                                    font="mono"
                                     onChange={(event) =>
                                       editCell(row, field.key, event.target.value)
                                     }
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 53e91c6307303ac36c356bd165e120fbc5bb38af..349949848cb096c02fca5dddd48ff23fb8ccfde2 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 = 1060;
+export const RESTYLE_CEILING = 1043;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0