fix(settings): widen the column, and end the currencies scrollbar

Two fixes that looked like one. The horizontal scrollbar under the currencies
table was not a width problem, and widening alone would never have removed it.

The column: `max-w-4xl` here was 256px narrower than the shell's `main`, which
is already `max-w-6xl`, so the card edges stepped inward whenever you arrived
from the month view. The cap is simply gone rather than raised to `max-w-6xl` —
`main` caps the width and pads it, so a 6xl cap on the child could never bind,
and two caps that agree are still two places to change.

The scrollbar: the row's remove button carries `-mr-2`, so its label sits flush
with the card's content edge rather than 8px inside it. To a scroll container
that overhang IS overflow, and because the table is `w-full` it scaled with the
column — 862 in 854 before, 1070 in 1062 after widening. Exactly 8px at every
width, which is why no amount of widening helped. The wrapper now bleeds 8px
right and pads it back, so the overhang lands inside the padding box: same
table width, same button position, no scrollbar. The same `-mx-2 px-2` shape as
the purchase rows in acb4d97.

A first attempt at diagnosis blamed the table's natural width and was wrong; a
second, zeroing the margin in the page, appeared to disprove the margin too,
because a transition was still interpolating it (-7.73662px when measured).
Waiting out the transition is what made the cause visible.

Verified in Chrome across every route: /settings, /month and /summary have no
scrolling container whose content overflows it. /year still does, by 282px,
which is YearMatrix being genuinely wider than the column — that scrollbar is
doing its job and is left alone.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/ui/routes/SettingsRoute.tsx

@@ -8,10 +8,16 @@ import { ColophonSection } from "./settings/ColophonSection.tsx";
  * and the export/import of everything — and running them together down one
  * column, as before, made the destructive import controls look like a
  * continuation of the harmless ones.
+ *
+ * No width cap of its own: the shell's `main` is already `max-w-6xl`, and the
+ * `max-w-4xl` here was 256px narrower, so the card edges stepped inward when
+ * you came from the month view. It also squeezed the currencies table 8px past
+ * its container, which is what put a horizontal scrollbar under it and pinned
+ * "remove" against the card edge.
  */
 export function SettingsRoute() {
   return (
-    <div className="max-w-4xl space-y-5">
+    <div className="space-y-5">
       <h1 className="text-2xl">Settings</h1>
       <CurrencySection />
       <PostsSection />

src/ui/routes/settings/CurrencySection.tsx

@@ -92,7 +92,15 @@ export function CurrencySection() {
         </NativeSelect>
       </div>
 
-      <div className="overflow-x-auto">
+      {/* `-mr-2 pr-2`, not a bare `overflow-x-auto`: the row's remove button
+          carries `-mr-2` so its label sits flush with the card's content edge
+          rather than 8px inside it. That overhang is 8px of overflow to a
+          scroll container, and since the table is `w-full` it scaled with the
+          column — so the horizontal scrollbar appeared at every width and no
+          amount of widening removed it. Bleeding the scroll box 8px right and
+          padding it back puts the overhang inside the padding box: same table
+          width, same button position, no scrollbar. */}
+      <div className="-mr-2 overflow-x-auto pr-2">
         <table className="w-full min-w-[42rem] text-sm">
           <thead className="text-left">
             <tr className="border-b border-budget-rule text-[0.6875rem] uppercase tracking-wider text-budget-ink-muted">