From 2c519547900f9b37a9c7116a8e21378a77e7274e Mon Sep 17 00:00:00 2001
From: Viktor Barzin <vbarzin@gmail.com>
Date: Sun, 10 May 2026 10:50:37 +0000
Subject: [PATCH] whatif: widen number fields so 7-digit GBP doesn't clip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NW seed at £1.5M was nearly clipping in the BigNumber inputs. Widened
the form column 420→480px, switched the anchor row to a weighted
1.4/1.2/0.7 grid so NW seed and Spending get more room than Horizon,
dropped the BigNumber font from text-2xl to text-xl, and tightened
prefix/suffix padding to claw back digits.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/WhatIf.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/WhatIf.tsx b/frontend/src/pages/WhatIf.tsx
index ec1e2ff..4b0ef80 100644
--- a/frontend/src/pages/WhatIf.tsx
+++ b/frontend/src/pages/WhatIf.tsx
@@ -167,7 +167,7 @@ export function WhatIf() {
         </p>
       </header>
 
-      <div className="grid grid-cols-1 lg:grid-cols-[420px_1fr] gap-6 items-start">
+      <div className="grid grid-cols-1 lg:grid-cols-[480px_1fr] gap-6 items-start">
         <form onSubmit={onSubmit} className="space-y-4 sticky top-4">
           <AnchorNumbers form={form} update={update} />
 
@@ -241,7 +241,7 @@ function AnchorNumbers({
 }) {
   return (
     <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
-      <div className="grid grid-cols-3 gap-3">
+      <div className="grid grid-cols-[1.4fr_1.2fr_0.7fr] gap-3">
         <BigNumber
           label="NW seed"
           prefix="£"
@@ -513,13 +513,13 @@ function BigNumber({
   step?: number;
 }) {
   return (
-    <label className="block">
+    <label className="block min-w-0">
       <span className="text-[11px] uppercase tracking-wide text-slate-500 font-medium">
         {label}
       </span>
       <div className="mt-1 relative">
         {prefix && (
-          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm pointer-events-none">
+          <span className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-base pointer-events-none">
             {prefix}
           </span>
         )}
@@ -529,12 +529,12 @@ function BigNumber({
           step={step}
           min={0}
           onChange={(e) => onChange(e.target.value)}
-          className={`w-full rounded-md border border-slate-300 bg-white py-2 text-2xl font-semibold tabular-nums focus:outline-none focus:ring-2 focus:ring-slate-400 ${
-            prefix ? 'pl-7' : 'pl-3'
-          } ${suffix ? 'pr-12' : 'pr-3'}`}
+          className={`w-full rounded-md border border-slate-300 bg-white py-2 text-xl font-semibold tabular-nums focus:outline-none focus:ring-2 focus:ring-slate-400 ${
+            prefix ? 'pl-6' : 'pl-2.5'
+          } ${suffix ? 'pr-9' : 'pr-2.5'}`}
         />
         {suffix && (
-          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm pointer-events-none">
+          <span className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs pointer-events-none">
             {suffix}
           </span>
         )}