The Leverantörsfakturor table was 1133px wide at every desktop size while
the content column is at most 960px (max-w-5xl minus px-8) and 948px on a
1280-wide laptop. With nowrap cells every column adds its widest header
or cell to the table's minimum width, so the overflow-x-auto wrapper
scrolled sideways: Leverantör collapsed to its header width (129px) and
the Status chips were cut at the right edge, with the Godkänn column off
screen. Measured with the real page rendered under /sandbox at 1280,
1366, 1440, 1536 and 1920 wide.
The list carried two date columns plus "Kvar att betala" on top of what
the customer invoice list shows, and #2091's always-visible sort control
added ~18px to each of seven headers, which tipped an already tight
budget over the column. Viewport breakpoints cannot help because the
column is capped at 960px regardless of screen size.
- Drop the Fakturadatum column from the list: förfaller is the payer's
date and the default order, and the invoice date lives in the detail
view (the customer invoice list has no invoice-date column either).
The sort comparator keeps invoice_date as its tie-break; only the
header goes.
- Shorten the sv header "Kvar att betala" to "Kvar": the label was 163px
for a column whose numbers need ~120px.
- Leave a column-budget comment on the table and one sentence in the
dry-table design rule, since there is no shared list component to fix:
every page-level list hand-writes the overflow-x-auto wrapper, and the
three overflow reports had three different causes.
After the change the table measures 948/960px (equal to its wrapper) with
worst-case data (16-char invoice numbers, seven-digit amounts, two chips
on one row), and Leverantör keeps 142-154px even then.
Fixes#2262
Claude-Session: https://claude.ai/code/session_015qgLgdt4mLmha1ZLFMwq1u
Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
Jakob Wennberg
68fee7dbe7