viktor/fire-planner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

whatif: widen number fields so 7-digit GBP doesn't clip
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source 
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>
This commit is contained in:
Viktor Barzin 2026-05-10 10:50:37 +00:00
parent 1d347ff65b
commit 2c51954790
1 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/pages/WhatIf.tsx
View file

@ -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>
)}