From 6c24aa8390dc5351809edb326ed2b5703410c292 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Mon, 21 Sep 2026 22:15:33 -0400
Subject: [PATCH] Make the ledger's settings read as settings

Absorbed by and Target applies to each hand-rolled their own label row and
their own hint, at two different type sizes, with no shared label width and
no rule separating them from the numbers above. Stacked, they read as a
paragraph of loose words -- label, two buttons, a sentence, label, two
buttons, a longer sentence -- rather than as two settings on the edit.

Both now use Field, like every other setting in this panel: one aligned
label column, the control, the hint below it in the same muted 11px. Per
slice joins them instead of trailing off as a bare paragraph. Target
applies to becomes Target on, which fits the label column without wrapping.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/src/components/OperationPanel.jsx | 90 ++++++++++++++--------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/ui/src/components/OperationPanel.jsx b/ui/src/components/OperationPanel.jsx
index e41dd66..dd40ae7 100644
--- a/ui/src/components/OperationPanel.jsx
+++ b/ui/src/components/OperationPanel.jsx
@@ -666,53 +666,53 @@ function ScaleLedger({ currentTotals, scaleInputs, setScaleInputs, scalePlug, se
       {/* A dollar figure on its own does not say whether price or volume moved.
           Only ask once the edit is actually dollars-only -- naming units or price
           has already answered it, and the control would just be noise. */}
-      {valueCol && unitsCol && dollarsOnly && (
-        <div className="flex flex-col gap-1 mt-2">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-gray-600 whitespace-nowrap">Absorbed by</span>
-            <Segmented
-              value={scalePlug}
-              onChange={setScalePlug}
-              options={[
-                ['price',  'Price',  `${unitsCol} holds; price moves to reach the number`],
-                ['volume', 'Volume', `Price holds; ${unitsCol} scales with the dollars`],
-              ]}
-            />
-          </div>
-          <div className="text-[11px] text-gray-500 leading-snug">
-            {scalePlug === 'price'
-              ? `${unitsCol} holds; price moves to reach the number.`
-              : `Price holds; ${unitsCol} scales with the dollars.`}
-          </div>
-        </div>
-      )}
+      {/* Both of these are settings on the edit, so they use Field like every
+          other one -- an aligned label column and a hint below the control.
+          They used to hand-roll their own label row and hint, with two
+          different type sizes and no shared label width, so the two stacked
+          into a paragraph of loose words rather than reading as two settings. */}
+      {(valueCol && unitsCol && dollarsOnly || hasExcl || perSlice) && (
+        <div className="flex flex-col gap-2 mt-3 pt-3 border-t border-gray-100">
 
-      {hasExcl && (
-        <div className="flex flex-col gap-1 mt-2">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-gray-600 whitespace-nowrap">Target applies to</span>
-            <Segmented
-              value={onTotal ? 'selected' : 'adjustable'}
-              onChange={setTargetBasis}
-              options={[
-                ['adjustable', 'Adjustable',     'Measure against only the rows this operation can write'],
-                ['selected',   'Selected total', 'Measure against everything the pivot shows, fixed rows included'],
-              ]}
-            />
-          </div>
-          <p className="text-gray-600 leading-snug max-w-md">
-            {onTotal
-              ? `The ${exclName} rows cannot change, so the adjustable rows absorb the whole difference — the pivot will show your target.`
-              : `${exclName} rows are ignored. The pivot will show your target plus ${fmtNum(excl.value)}.`}
-          </p>
-        </div>
-      )}
+          {valueCol && unitsCol && dollarsOnly && (
+            <Field label="Absorbed by"
+              hint={scalePlug === 'price'
+                ? `${unitsCol} holds; price moves to reach the number.`
+                : `Price holds; ${unitsCol} scales with the dollars.`}>
+              <Segmented
+                value={scalePlug}
+                onChange={setScalePlug}
+                options={[
+                  ['price',  'Price',  `${unitsCol} holds; price moves to reach the number`],
+                  ['volume', 'Volume', `Price holds; ${unitsCol} scales with the dollars`],
+                ]}
+              />
+            </Field>
+          )}
 
-      {perSlice && (
-        <p className="text-gray-600 leading-snug mt-2 max-w-md">
-          Applied to each slice separately — the figures above are combined totals,
-          so each slice's own change will differ.
-        </p>
+          {hasExcl && (
+            <Field label="Target on"
+              hint={onTotal
+                ? `${exclName} can't change, so the adjustable rows absorb the difference. The pivot will show your target.`
+                : `${exclName} ignored. The pivot will show your target plus ${fmtNum(excl.value)}.`}>
+              <Segmented
+                value={onTotal ? 'selected' : 'adjustable'}
+                onChange={setTargetBasis}
+                options={[
+                  ['adjustable', 'Adjustable',     'Measure against only the rows this operation can write'],
+                  ['selected',   'Selected total', 'Measure against everything the pivot shows, fixed rows included'],
+                ]}
+              />
+            </Field>
+          )}
+
+          {perSlice && (
+            <Field label="Per slice"
+              hint="The figures above are combined totals, so each slice's own change will differ.">
+              <span className="text-gray-500">Applied to each slice separately</span>
+            </Field>
+          )}
+        </div>
       )}
     </div>
   )