From ebef56eef48bb06cb3f63e8d5159fa1f56fbc529 Mon Sep 17 00:00:00 2001 From: Lucas Winther Date: Thu, 3 Sep 2026 02:52:26 +0200 Subject: [PATCH] fix(settings): widen the column, and end the currencies scrollbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/ui/routes/SettingsRoute.tsx | 8 +++++++- src/ui/routes/settings/CurrencySection.tsx | 10 +++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) 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. */} +