pt/pf_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Line the percent box up with the other two

Browse Source 
The % was a sibling of the input in a flex row, so it took width of its
own. In a right-aligned cell that pushed the percent row's box a suffix and
a gap to the left of New value and Change -- three ways of saying the same
thing, not lining up.

It now sits inside the box, over the input's right padding, so every row is
the same width against the same edge, and that edge is where the numbers
above it end too.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Trowbridge 2026-09-21 22:20:49 -04:00
parent 6c24aa8390
commit a642c65d1d
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/components/OperationPanel.jsx
View File

@ -305,8 +305,13 @@ function LedgerInput({ value, active, onChange, onFocus, suffix }) {
try { el.setSelectionRange(pos, pos) } catch {} try { el.setSelectionRange(pos, pos) } catch {}
}, [display]) }, [display])
// The suffix is positioned inside the box rather than set beside it. As a
// sibling in the flex row it took width of its own, so in a right-aligned cell
// the % row's input sat a suffix-and-a-gap to the left of the rows above it,
// and the three boxes that are meant to be three ways of saying one thing did
// not line up. Inside, every row's box is the same width and the same edge.
return ( return (
<span className="inline-flex items-center gap-1"> <span className="relative inline-flex items-center">
<input <input
ref={ref} ref={ref}
type="text" inputMode="decimal" value={display} type="text" inputMode="decimal" value={display}
@ -317,9 +322,13 @@ function LedgerInput({ value, active, onChange, onFocus, suffix }) {
onChange(el.value.replace(/,/g, '')) onChange(el.value.replace(/,/g, ''))
}} }}
onFocus={onFocus} placeholder="—" onFocus={onFocus} placeholder="—"
className={`border rounded px-2 py-0.5 text-xs w-24 text-right font-mono tabular-nums className={`border rounded py-0.5 text-xs w-24 text-right font-mono tabular-nums
${suffix ? 'pl-2 pr-5' : 'px-2'}
${active ? 'border-blue-400 bg-blue-50/40 text-gray-800' : 'border-gray-200 bg-white text-gray-700'}`} /> ${active ? 'border-blue-400 bg-blue-50/40 text-gray-800' : 'border-gray-200 bg-white text-gray-700'}`} />
{suffix && <span className="text-gray-500" style={{ fontSize: '10px' }}>{suffix}</span>} {suffix && (
<span className="absolute right-1.5 text-gray-400 pointer-events-none"
style={{ fontSize: '10px' }}>{suffix}</span>
)}
</span> </span>
) )
} }