From cbab7358b0fce6349b8c171a74c5c3a1725705dd Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 2 Sep 2026 22:59:14 +0200
Subject: [PATCH] fix(ui): cap the hint measure, and pad the last two bare
 controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Section's hint ran the full width of the card — about 160 characters a line
at 12px on a 1140px card, more than twice a readable measure, and the
Currencies and Posts hints both wrapped to three lines that read as a wall
rather than as one aside. Capped at 75ch.

PostTable's "change from here" was a single line of 11px text with no
padding, so a 15px target. It gets padding cancelled by equal negative
margins, so the hit area grows and no baseline moves.

UpdatePrompt used `rounded` (4px) where the card system is 8px, which made
the one panel that appears over everything else the only one with a tighter
radius than its surroundings.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/ui/components/PostTable.tsx    | 6 +++++-
 src/ui/components/Section.tsx      | 8 +++++++-
 src/ui/components/UpdatePrompt.tsx | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/ui/components/PostTable.tsx b/src/ui/components/PostTable.tsx
index 4781fa2..3701be3 100644
--- a/src/ui/components/PostTable.tsx
+++ b/src/ui/components/PostTable.tsx
@@ -148,7 +148,11 @@ function ChangeRuleButton({
   return (
     <button
       type="button"
-      className={`rounded text-budget-ink-muted underline decoration-dotted underline-offset-2 transition-opacity hover:text-budget-accent ${className}`}
+      // `-my-1 py-1 -mx-1 px-1` is a hit area, not spacing: the label is a
+      // single line of 11px text, so untouched it is a 15px-tall target. The
+      // negative margins cancel the padding, so nothing moves and the row's
+      // baselines are unchanged.
+      className={`-mx-1 -my-1 rounded-sm px-1 py-1 text-budget-ink-muted underline decoration-dotted underline-offset-2 transition-opacity hover:text-budget-accent ${className}`}
       onClick={() => onChangeRule(postId)}
     >
       change from here
diff --git a/src/ui/components/Section.tsx b/src/ui/components/Section.tsx
index bed3c45..12aa3f0 100644
--- a/src/ui/components/Section.tsx
+++ b/src/ui/components/Section.tsx
@@ -28,8 +28,14 @@ export function Section({ title, action, hint, children, className = "" }: Props
         <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
           <div className="min-w-0">
             {title && <h2 className="text-base leading-tight">{title}</h2>}
+            {/* Capped measure. Uncapped, the Currencies and Posts hints ran
+                the full 1140px of the card at 12px — about 160 characters a
+                line, more than twice a readable measure, and both wrapped to
+                three lines that read as a wall rather than as one aside. */}
             {hint && (
-              <p className="mt-1 text-xs leading-relaxed text-budget-ink-muted">{hint}</p>
+              <p className="mt-1 max-w-[75ch] text-xs leading-relaxed text-budget-ink-muted">
+                {hint}
+              </p>
             )}
           </div>
           {action && <div className="flex shrink-0 items-center gap-2">{action}</div>}
diff --git a/src/ui/components/UpdatePrompt.tsx b/src/ui/components/UpdatePrompt.tsx
index 3447bd6..4f7f8d8 100644
--- a/src/ui/components/UpdatePrompt.tsx
+++ b/src/ui/components/UpdatePrompt.tsx
@@ -12,7 +12,7 @@ export function UpdatePrompt() {
   if (!ready) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 flex items-center gap-3 rounded border bg-background p-3 text-sm shadow-lg">
+    <div className="fixed bottom-4 right-4 flex items-center gap-3 rounded-lg border border-budget-rule bg-background p-4 text-sm shadow-lg">
       <span>A new version is ready.</span>
       <Button size="sm" onClick={applyUpdate}>
         Reload