fix(ui): cap the hint measure, and pad the last two bare controls

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