diff --git a/.claude/rules/design.md b/.claude/rules/design.md index 0b8aaa4a..d0f78fcf 100644 --- a/.claude/rules/design.md +++ b/.claude/rules/design.md @@ -97,7 +97,7 @@ Compact metric cards (e.g. dashboard tiles, salary KPI row) use `p-4`. Detail ca | Need | Component | Notes | |---|---|---| | Page title + action | `components/ui/page-header.tsx` `PageHeader` | Use this, not bespoke `

` + `

` blocks. Drop the `description` prop when it just paraphrases the title. | -| Data table, **page-level list** | `components/ui/dry-table.tsx` `TH_CLASS` / `TD_CLASS` on a plain ``, rows `hover:bg-secondary/35` | The concept list table: borderless, straight on the panel, 13px rows, hairline heads. This is what every migrated list page uses. Add `tabular-nums` to numeric cells. Hover-revealed row controls use `HOVER_REVEAL_CLASS` from the same file, never a hand-rolled `opacity-0 group-hover:opacity-100` (coarse pointers never hover, so the control would be unreachable on touch). | +| Data table, **page-level list** | `components/ui/dry-table.tsx` `TH_CLASS` / `TD_CLASS` on a plain `
`, rows `hover:bg-secondary/35` | The concept list table: borderless, straight on the panel, 13px rows, hairline heads. This is what every migrated list page uses. Add `tabular-nums` to numeric cells. Hover-revealed row controls use `HOVER_REVEAL_CLASS` from the same file, never a hand-rolled `opacity-0 group-hover:opacity-100` (coarse pointers never hover, so the control would be unreachable on touch). Budget the columns before adding one: the content column is at most 960px (948px on a 1280-wide laptop) at every desktop size, so a nowrap column that does not fit makes the wrapper scroll sideways and squeezes the flexible name column to its header width (#2125, #2262); viewport breakpoints cannot buy room, drop or shorten a column instead. | | Data table, **dialog or report view** | `components/ui/table.tsx` `Table / TableHeader / TableHead / TableRow / TableCell` | Header style is baked in: `text-[11px] font-medium uppercase tracking-wider text-muted-foreground`. Wrap in `` when the table is a card's primary content. `TableCell` is `px-4 py-3` on `text-sm`, so a page-level list built from this primitive comes out ~15% taller with a different hover tint: use the dry-table row above instead. | | Status indicator | `components/ui/badge.tsx` `` | Chips mark exceptions only: normal states (Aktiv, Bokförd, Betald-i-tid) render as muted text (`text-muted-foreground text-xs`); Badge is reserved for rows that deviate (Utkast, Förfallen, Ej bokförd). A table where every row carries the same chip is wrong. Variants: `default / secondary / success / warning / destructive / outline`. **Never** use raw Tailwind colors (`bg-blue-100`, `bg-emerald-500/10`, etc.) for status. Map status → variant via a small `Record` per feature. | | No-data state | `components/ui/empty-state.tsx` `EmptyState` | Don't hand-roll `
`. Preset variants exist (`EmptyCustomers`, `EmptyByraClients`). | diff --git a/app/(dashboard)/supplier-invoices/page.tsx b/app/(dashboard)/supplier-invoices/page.tsx index 6da5ef8b..ec79babe 100644 --- a/app/(dashboard)/supplier-invoices/page.tsx +++ b/app/(dashboard)/supplier-invoices/page.tsx @@ -613,6 +613,14 @@ export default function SupplierInvoicesPage() { } /> ) : ( + /* Column budget (#2262): the content column is at most 960px (max-w-5xl + minus px-8) and 948px on a 1280-wide laptop, at every desktop size, + so viewport breakpoints cannot buy room. Every nowrap column adds its + widest header or cell to the table's minimum width; past the budget + the wrapper scrolls sideways, Leverantör collapses to its header + width and Status is cut at the edge. That is why the list carries + one date (förfaller: the payer's date and the default order) and a + short Kvar header; fakturadatum lives in the detail view. */
@@ -633,15 +641,6 @@ export default function SupplierInvoicesPage() { sort={sort} onSort={updateSort} /> - - diff --git a/messages/en.json b/messages/en.json index 978d547c..8b3c15bb 100644 --- a/messages/en.json +++ b/messages/en.json @@ -803,7 +803,6 @@ "th_arrival": "Arrival", "th_supplier": "Supplier", "th_invoice_number": "Invoice no.", - "th_invoice_date": "Invoice date", "th_due_date": "Due", "th_amount": "Amount", "th_remaining": "Remaining", diff --git a/messages/sv.json b/messages/sv.json index 5d146220..f986e939 100644 --- a/messages/sv.json +++ b/messages/sv.json @@ -803,10 +803,9 @@ "th_arrival": "Ankomst", "th_supplier": "Leverantör", "th_invoice_number": "Fakturanr", - "th_invoice_date": "Fakturadatum", "th_due_date": "Förfaller", "th_amount": "Belopp", - "th_remaining": "Kvar att betala", + "th_remaining": "Kvar", "th_status": "Status", "sort_by": "Sortera efter {column}", "status_registered": "Registrerad",
- {formatDate(inv.invoice_date)} - {formatDate(inv.due_date)}