diff --git a/src/ui/routes/SettingsRoute.tsx b/src/ui/routes/SettingsRoute.tsx index 8d3387b..f64a699 100644 --- a/src/ui/routes/SettingsRoute.tsx +++ b/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 ( -
+

Settings

diff --git a/src/ui/routes/settings/CurrencySection.tsx b/src/ui/routes/settings/CurrencySection.tsx index d0e0e8f..c29fd37 100644 --- a/src/ui/routes/settings/CurrencySection.tsx +++ b/src/ui/routes/settings/CurrencySection.tsx @@ -92,7 +92,15 @@ export function CurrencySection() {
-
+ {/* `-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. */} +