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