From 7602f9040e6b778a344057b02a6f6d4a7e3bbd17 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <vbarzin@gmail.com>
Date: Sun, 10 May 2026 00:34:09 +0000
Subject: [PATCH] ui: drop restrictive step on monetary inputs + round NW
 autofill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

step={1000}/step={10000} on £ inputs blocked any non-multiple value
from passing browser validation. Surfaced when the Wealthfolio
autofill landed `1050195.09` into the NW field — Chrome rejected
it: "the two nearest valid values are 1050000 and 1060000". Same
class as the n_paths bug from earlier today.

- Remove step on spending_gbp / nw_seed_gbp / savings_per_year_gbp /
  floor_gbp across What-If, ScenarioNew, ScenarioEdit. Default step=1
  (any positive integer).
- Round NW autofill to whole pounds (Math.round) since the user
  doesn't think in pence at this scale and the rounded value
  satisfies any integer step.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/ScenarioEdit.tsx | 3 ---
 frontend/src/pages/ScenarioNew.tsx  | 6 ++----
 frontend/src/pages/WhatIf.tsx       | 9 ++++-----
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/ScenarioEdit.tsx b/frontend/src/pages/ScenarioEdit.tsx
index 64ad464..8f4b3e6 100644
--- a/frontend/src/pages/ScenarioEdit.tsx
+++ b/frontend/src/pages/ScenarioEdit.tsx
@@ -130,7 +130,6 @@ export function ScenarioEdit() {
             value={Number(form.spending_gbp)}
             onChange={(v) => update('spending_gbp', String(v))}
             min={0}
-            step={1000}
           />
         </Field>
         <Field label="NW seed (£)">
@@ -138,7 +137,6 @@ export function ScenarioEdit() {
             value={Number(form.nw_seed_gbp)}
             onChange={(v) => update('nw_seed_gbp', String(v))}
             min={0}
-            step={10000}
           />
         </Field>
         <Field label="Annual savings (£)">
@@ -146,7 +144,6 @@ export function ScenarioEdit() {
             value={Number(form.savings_per_year_gbp ?? 0)}
             onChange={(v) => update('savings_per_year_gbp', String(v))}
             min={0}
-            step={1000}
           />
         </Field>
         <Field label="Horizon (years)">
diff --git a/frontend/src/pages/ScenarioNew.tsx b/frontend/src/pages/ScenarioNew.tsx
index 30eaf39..3bb0780 100644
--- a/frontend/src/pages/ScenarioNew.tsx
+++ b/frontend/src/pages/ScenarioNew.tsx
@@ -36,7 +36,8 @@ export function ScenarioNew() {
   const nw = useQuery({ queryKey: ['networth', 'current'], queryFn: api.networth.current });
   useEffect(() => {
     if (nwAutoFilled || !nw.data || nw.data.accounts.length === 0) return;
-    setForm((f) => ({ ...f, nw_seed_gbp: nw.data!.total_gbp }));
+    const rounded = String(Math.round(Number(nw.data.total_gbp)));
+    setForm((f) => ({ ...f, nw_seed_gbp: rounded }));
     setNwAutoFilled(true);
   }, [nw.data, nwAutoFilled]);
 
@@ -121,7 +122,6 @@ export function ScenarioNew() {
             value={Number(form.spending_gbp)}
             onChange={(v) => update('spending_gbp', String(v))}
             min={0}
-            step={1000}
           />
         </Field>
         <Field label="NW seed (£)">
@@ -129,7 +129,6 @@ export function ScenarioNew() {
             value={Number(form.nw_seed_gbp)}
             onChange={(v) => update('nw_seed_gbp', String(v))}
             min={0}
-            step={10000}
           />
         </Field>
         <Field label="Annual savings (£)">
@@ -137,7 +136,6 @@ export function ScenarioNew() {
             value={Number(form.savings_per_year_gbp ?? 0)}
             onChange={(v) => update('savings_per_year_gbp', String(v))}
             min={0}
-            step={1000}
           />
         </Field>
         <Field label="Horizon (years)">
diff --git a/frontend/src/pages/WhatIf.tsx b/frontend/src/pages/WhatIf.tsx
index 0c8f6ef..d8a4bef 100644
--- a/frontend/src/pages/WhatIf.tsx
+++ b/frontend/src/pages/WhatIf.tsx
@@ -41,7 +41,10 @@ export function WhatIf() {
   const nw = useQuery({ queryKey: ['networth', 'current'], queryFn: api.networth.current });
   useEffect(() => {
     if (nwAutoFilled || !nw.data || nw.data.accounts.length === 0) return;
-    setForm((f) => ({ ...f, nw_seed_gbp: nw.data!.total_gbp }));
+    // Round to whole pounds — pence from the API don't survive HTML5
+    // step validation, and the user doesn't think in pence at this scale.
+    const rounded = String(Math.round(Number(nw.data.total_gbp)));
+    setForm((f) => ({ ...f, nw_seed_gbp: rounded }));
     setNwAutoFilled(true);
   }, [nw.data, nwAutoFilled]);
 
@@ -134,7 +137,6 @@ export function WhatIf() {
               value={Number(form.spending_gbp)}
               onChange={(v) => update('spending_gbp', String(v))}
               min={0}
-              step={1000}
             />
           </Field>
           <Field label="NW seed (£)">
@@ -142,7 +144,6 @@ export function WhatIf() {
               value={Number(form.nw_seed_gbp)}
               onChange={(v) => update('nw_seed_gbp', String(v))}
               min={0}
-              step={10000}
             />
           </Field>
           <Field label="Annual savings (£)">
@@ -150,7 +151,6 @@ export function WhatIf() {
               value={Number(form.savings_per_year_gbp ?? 0)}
               onChange={(v) => update('savings_per_year_gbp', String(v))}
               min={0}
-              step={1000}
             />
           </Field>
           <Field label="Horizon (years)">
@@ -167,7 +167,6 @@ export function WhatIf() {
                 value={Number(form.floor_gbp ?? 40000)}
                 onChange={(v) => update('floor_gbp', String(v))}
                 min={0}
-                step={1000}
               />
             </Field>
           )}