From a642c65d1dae034a7df57242e48b882fe68e5277 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Mon, 21 Sep 2026 22:20:49 -0400
Subject: [PATCH] Line the percent box up with the other two

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>
---
 ui/src/components/OperationPanel.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/OperationPanel.jsx b/ui/src/components/OperationPanel.jsx
index dd40ae7..7bf8172 100644
--- a/ui/src/components/OperationPanel.jsx
+++ b/ui/src/components/OperationPanel.jsx
@@ -305,8 +305,13 @@ function LedgerInput({ value, active, onChange, onFocus, suffix }) {
     try { el.setSelectionRange(pos, pos) } catch {}
   }, [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 (
-    <span className="inline-flex items-center gap-1">
+    <span className="relative inline-flex items-center">
       <input
         ref={ref}
         type="text" inputMode="decimal" value={display}
@@ -317,9 +322,13 @@ function LedgerInput({ value, active, onChange, onFocus, suffix }) {
           onChange(el.value.replace(/,/g, ''))
         }}
         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'}`} />
-      {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>
   )
 }