authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-22 12:22:13-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-22 12:22:13-07:00
log7b54af90f79a6858f75ff86d42a2f083d4edfa2a
tree67d053777b62d02604de5d03db99d275d82b9448
parentb4f1f18b735679aedc4369190fc3f07ecaf8966c
signature Signed by PGP key B5690EEEBB952194

refactor(web): add font="mono" to Input (#13027)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

9 files changed, 33 insertions(+), 22 deletions(-)

apps/web/src/components/device/DeviceToolsPanel.tsx+7-4
......@@ -493,7 +493,8 @@ function SubmitRow(props: {
493493 >
494494 <Input
495495 size="compact"
496 className="min-w-0 flex-1 font-mono"
496 font="mono"
497 className="min-w-0 flex-1"
497498 placeholder={props.placeholder}
498499 value={value}
499500 disabled={props.disabled}
......@@ -530,7 +531,8 @@ function LocationSection(props: {
530531 <div className="flex gap-1.5">
531532 <Input
532533 size="compact"
533 className="min-w-0 flex-1 font-mono"
534 font="mono"
535 className="min-w-0 flex-1"
534536 placeholder="Latitude"
535537 inputMode="decimal"
536538 value={latitude}
......@@ -539,7 +541,8 @@ function LocationSection(props: {
539541 />
540542 <Input
541543 size="compact"
542 className="min-w-0 flex-1 font-mono"
544 font="mono"
545 className="min-w-0 flex-1"
543546 placeholder="Longitude"
544547 inputMode="decimal"
545548 value={longitude}
......@@ -619,7 +622,7 @@ function PermissionsSection(props: {
619622 <Section title="Permissions">
620623 <Input
621624 size="compact"
622 className="font-mono"
625 font="mono"
623626 placeholder={props.defaultAppId || "App ID"}
624627 value={appId}
625628 disabled={props.disabled}
apps/web/src/components/settings/CustomModelEditor.tsx+4-2
......@@ -154,7 +154,8 @@ export function CustomModelEditor({
154154 value={choice.id}
155155 onChange={(event) => updateChoice(descriptor.key, choice.key, { id: event.target.value })}
156156 placeholder="value"
157 className="w-28 font-mono"
157 font="mono"
158 className="w-28"
158159 spellCheck={false}
159160 aria-label="Choice value"
160161 />
......@@ -230,7 +231,8 @@ export function CustomModelEditor({
230231 value={descriptor.id}
231232 onChange={(event) => updateDescriptor(descriptor.key, { id: event.target.value })}
232233 placeholder="optionId"
233 className="w-36 font-mono"
234 font="mono"
235 className="w-36"
234236 spellCheck={false}
235237 aria-label="Option id"
236238 />
apps/web/src/components/settings/KeybindingsSettings.tsx+8-10
......@@ -320,7 +320,7 @@ function WhenVariableSelect({
320320
321321 return (
322322 <Select value={value} onValueChange={(nextValue) => nextValue && onChange(nextValue)}>
323 <SelectTrigger size="compact" className="min-w-0 flex-1 font-mono">
323 <SelectTrigger size="compact" className="min-w-0 flex-1">
324324 <SelectValue placeholder="Condition" className="leading-7" />
325325 {unknownIdentifiers && unknownIdentifiers.length > 0 ? (
326326 <UnknownWhenVariableWarning identifiers={unknownIdentifiers} focusable={false} />
......@@ -333,11 +333,7 @@ function WhenVariableSelect({
333333 className="max-h-72 w-fit min-w-44"
334334 >
335335 {options.map((option) => (
336 <SelectItem
337 key={option}
338 value={option}
339 className="min-h-7 w-full py-1 font-mono text-[12px]"
340 >
336 <SelectItem key={option} value={option} className="min-h-7 w-full py-1 text-[12px]">
341337 <span className="truncate">{option}</span>
342338 </SelectItem>
343339 ))}
......@@ -546,10 +542,10 @@ function WhenExpressionNodeEditor({
546542 popupClassName="w-fit"
547543 className="w-fit min-w-24"
548544 >
549 <SelectItem value="and" className="min-h-7 py-1 font-mono text-[12px]">
545 <SelectItem value="and" className="min-h-7 py-1 text-[12px]">
550546 and
551547 </SelectItem>
552 <SelectItem value="or" className="min-h-7 py-1 font-mono text-[12px]">
548 <SelectItem value="or" className="min-h-7 py-1 text-[12px]">
553549 or
554550 </SelectItem>
555551 </SelectContent>
......@@ -877,7 +873,8 @@ function KeybindingKeyControl({
877873 value={isRecording ? "" : keyDraft}
878874 placeholder={isRecording ? "Press shortcut" : "Unassigned"}
879875 size="sm"
880 className={cn("w-44 font-mono", isRecording && "border-primary/70 bg-primary/5")}
876 font="mono"
877 className={cn("w-44", isRecording && "border-primary/70 bg-primary/5")}
881878 onFocus={() => setDraft({ isRecording: true })}
882879 onBlur={() => setDraft({ isRecording: false })}
883880 onChange={(event) => setDraft({ keyDraft: event.currentTarget.value })}
......@@ -1190,7 +1187,8 @@ function NewKeybindingKeyInput({
11901187 value={draft.isRecording ? "" : draft.keyDraft}
11911188 placeholder={draft.isRecording ? "Press shortcut" : "Unassigned"}
11921189 size="sm"
1193 className={cn("font-mono", draft.isRecording && "border-primary/70 bg-primary/5", className)}
1190 font="mono"
1191 className={cn(draft.isRecording && "border-primary/70 bg-primary/5", className)}
11941192 onFocus={() => draft.setDraft({ isRecording: true })}
11951193 onBlur={() => draft.setDraft({ isRecording: false })}
11961194 onChange={(event) => draft.setDraft({ keyDraft: event.currentTarget.value })}
apps/web/src/components/settings/ProviderAccentColorPicker.tsx+2-1
......@@ -56,7 +56,8 @@ function ProviderCustomColorPanel(props: {
5656 props.onCommit(nextColor);
5757 }}
5858 onBlur={() => setHexDraft(null)}
59 className="font-mono text-xs"
59 font="mono"
60 className="text-xs"
6061 aria-label="Custom hex accent color"
6162 spellCheck={false}
6263 />
apps/web/src/components/settings/ProviderInstanceCard.tsx+4-2
......@@ -268,7 +268,8 @@ function ProviderEnvironmentSection(props: {
268268 <div key={variable.id} className="flex min-w-0 flex-wrap items-center gap-1.5">
269269 <DraftInput
270270 size="sm"
271 className="w-full min-w-0 font-mono sm:w-44 sm:shrink-0"
271 font="mono"
272 className="w-full min-w-0 sm:w-44 sm:shrink-0"
272273 value={variable.name}
273274 onCommit={(name) => updateVariable(variable.id, { name: name.trim() })}
274275 placeholder="VARIABLE_NAME"
......@@ -280,7 +281,8 @@ function ProviderEnvironmentSection(props: {
280281 </span>
281282 <DraftInput
282283 size="sm"
283 className="min-w-0 flex-1 font-mono"
284 font="mono"
285 className="min-w-0 flex-1"
284286 value={variable.valueRedacted ? "" : variable.value}
285287 onCommit={(value) => updateVariable(variable.id, { value })}
286288 type={variable.sensitive ? "password" : undefined}
apps/web/src/components/settings/ThemeColorPicker.tsx+2-1
......@@ -353,7 +353,8 @@ export const ThemeColorField = memo(function ThemeColorField({
353353 <Input
354354 aria-invalid={!isColorValue}
355355 aria-label={`${label} hex value`}
356 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"
356 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"
357 font="mono"
357358 id={`${role}-hex`}
358359 nativeInput
359360 onChange={(event) => onChange(role, event.currentTarget.value)}
apps/web/src/components/ui/input.tsx+4
......@@ -7,6 +7,8 @@ import { cn } from "~/lib/utils";
77
88type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputElement>, "size"> & {
99 size?: "sm" | "compact" | "default" | "lg" | number;
10 /** Monospace with tabular digits, for paths, commands, colors and numbers. */
11 font?: "default" | "mono";
1012 unstyled?: boolean;
1113 nativeInput?: boolean;
1214};
......@@ -14,6 +16,7 @@ type InputProps = Omit<InputPrimitive.Props & React.RefAttributes<HTMLInputEleme
1416function Input({
1517 className,
1618 size = "default",
19 font = "default",
1720 unstyled = false,
1821 nativeInput = false,
1922 ...props
......@@ -63,6 +66,7 @@ function Input({
6366 !unstyled &&
6467 size === "compact" &&
6568 "rounded-md before:rounded-[calc(var(--radius-md)-1px)]",
69 font === "mono" && "font-mono tabular-nums",
6670 className,
6771 ) || undefined
6872 }
apps/web/src/components/usage/UsagePriceOverrides.tsx+1-1
......@@ -429,7 +429,7 @@ export function UsagePriceOverrides({
429429 }
430430 autoComplete="off"
431431 disabled={locked}
432 className="tabular-nums"
432 font="mono"
433433 onChange={(event) =>
434434 editCell(row, field.key, event.target.value)
435435 }
scripts/lint-restyle-ceiling.ts+1-1
......@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
88// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
99// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
1010// migrate a file, and delete this script when the rule becomes an error.
11export const RESTYLE_CEILING = 1060;
11export const RESTYLE_CEILING = 1043;
1212
1313const RULE = "shadcn(no-restyle)";
1414