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> </p>
</header> </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"> <form onSubmit={onSubmit} className="space-y-4 sticky top-4">
<AnchorNumbers form={form} update={update} /> <AnchorNumbers form={form} update={update} />
@ -241,7 +241,7 @@ function AnchorNumbers({
}) { }) {
return ( return (
<div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm"> <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 <BigNumber
label="NW seed" label="NW seed"
prefix="£" prefix="£"
@ -513,13 +513,13 @@ function BigNumber({
step?: number; step?: number;
}) { }) {
return ( return (
<label className="block"> <label className="block min-w-0">
<span className="text-[11px] uppercase tracking-wide text-slate-500 font-medium"> <span className="text-[11px] uppercase tracking-wide text-slate-500 font-medium">
{label} {label}
</span> </span>
<div className="mt-1 relative"> <div className="mt-1 relative">
{prefix && ( {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} {prefix}
</span> </span>
)} )}
@ -529,12 +529,12 @@ function BigNumber({
step={step} step={step}
min={0} min={0}
onChange={(e) => onChange(e.target.value)} 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 ${ 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-7' : 'pl-3' prefix ? 'pl-6' : 'pl-2.5'
} ${suffix ? 'pr-12' : 'pr-3'}`} } ${suffix ? 'pr-9' : 'pr-2.5'}`}
/> />
{suffix && ( {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} {suffix}
</span> </span>
)} )}