From cc4d9f09dccc96c75a0b38c94e3ace7cc062a663 Mon Sep 17 00:00:00 2001
From: Brad Groux <bradgroux@Brads-Mac-mini.local>
Date: Fri, 30 Jan 2026 00:00:53 -0600
Subject: [PATCH] fix: use clean numeric inputs without browser spinners (fixes
 #19)

---
 .../components/settings/tabs/AgentsTab.tsx    |  2 ++
 web/src/components/settings/tabs/DataTab.tsx  | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/src/components/settings/tabs/AgentsTab.tsx b/web/src/components/settings/tabs/AgentsTab.tsx
index 5bad1b39..534c1235 100644
--- a/web/src/components/settings/tabs/AgentsTab.tsx
+++ b/web/src/components/settings/tabs/AgentsTab.tsx
@@ -137,6 +137,8 @@ export function AgentsTab() {
             min={5}
             max={480}
             unit="min"
+            hideSpinners
+            maxLength={3}
           />
           <ToggleRow
             label="Auto-Commit on Complete"
diff --git a/web/src/components/settings/tabs/DataTab.tsx b/web/src/components/settings/tabs/DataTab.tsx
index dccee61f..d1f2f91a 100644
--- a/web/src/components/settings/tabs/DataTab.tsx
+++ b/web/src/components/settings/tabs/DataTab.tsx
@@ -1,7 +1,4 @@
-import {
-  useFeatureSettings,
-  useDebouncedFeatureUpdate,
-} from '@/hooks/useFeatureSettings';
+import { useFeatureSettings, useDebouncedFeatureUpdate } from '@/hooks/useFeatureSettings';
 import { DEFAULT_FEATURE_SETTINGS } from '@veritas-kanban/shared';
 import { ToggleRow, NumberRow, SectionHeader, SaveIndicator } from '../shared';
 
@@ -54,6 +51,8 @@ export function DataTab() {
               min={7}
               max={365}
               unit="days"
+              hideSpinners
+              maxLength={3}
             />
             <ToggleRow
               label="Trace Collection"
@@ -73,7 +72,9 @@ export function DataTab() {
 
       {/* Budget Tracking */}
       <div className="space-y-3">
-        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Budget Tracking</h4>
+        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          Budget Tracking
+        </h4>
         <div className="divide-y">
           <ToggleRow
             label="Budget Tracking"
@@ -114,6 +115,8 @@ export function DataTab() {
                 max={99}
                 step={5}
                 unit="%"
+                hideSpinners
+                maxLength={2}
               />
             </>
           )}
@@ -122,7 +125,9 @@ export function DataTab() {
 
       {/* Archive */}
       <div className="space-y-3">
-        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Archive</h4>
+        <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          Archive
+        </h4>
         <div className="divide-y">
           <ToggleRow
             label="Auto-Archive"
@@ -139,6 +144,8 @@ export function DataTab() {
               min={1}
               max={365}
               unit="days"
+              hideSpinners
+              maxLength={3}
             />
           )}
         </div>