fix(supplier-invoices): gutter between table columns on the invoice detail (#1578)

The Rader and Betalningshistorik tables carried no horizontal cell
padding, so a right-aligned column ran flush into the next left-aligned
one: the headers read ANTALENHET / A-PRISKONTO / BELOPPVERIFIKATION and
the cells read "1st", "8 985 kr5010" and "11 231 krb9da9d7c". Every
column after the first now gets a pl-4 gutter, matching the dry-table
spacing (TD_CLASS px-4).

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-08-13 15:16:52 +02:00
committed by GitHub
parent 0643316ac8
commit d583a4e5bb
@@ -720,10 +720,13 @@ export default function SupplierInvoiceDetailPage() {
<CardTitle className="text-base">{t('rows_title')}</CardTitle>
</CardHeader>
<CardContent>
{/* Desktop table */}
{/* Desktop table. The cells carry no horizontal padding of their
own, so every column after the first gets a pl-4 gutter: without
it a right-aligned column runs flush into the next left-aligned
one ("8 985 kr5010", "ANTALENHET"). */}
<div className="hidden sm:block">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground [&_th:not(:first-child)]:pl-4">
<tr className="border-b text-left">
<th className="pb-2">{t('col_description')}</th>
<th className="pb-2 w-16 text-right">{t('col_quantity')}</th>
@@ -735,7 +738,7 @@ export default function SupplierInvoiceDetailPage() {
<th className="pb-2 w-24 text-right">{t('col_vat')}</th>
</tr>
</thead>
<tbody>
<tbody className="[&_td:not(:first-child)]:pl-4">
{items.map((item) => (
<tr key={item.id} className="border-b last:border-0">
<td className="py-2">
@@ -803,10 +806,11 @@ export default function SupplierInvoiceDetailPage() {
<CardTitle className="text-base">{t('payment_history_title')}</CardTitle>
</CardHeader>
<CardContent>
{/* Desktop table */}
{/* Desktop table: same non-first-column gutter as the line-item
table above ("11 231 krb9da9d7c" otherwise). */}
<div className="hidden sm:block">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground [&_th:not(:first-child)]:pl-4">
<tr className="border-b text-left">
<th className="pb-2">{t('col_date')}</th>
<th className="pb-2 text-right">{t('col_amount_short')}</th>
@@ -814,7 +818,7 @@ export default function SupplierInvoiceDetailPage() {
<th className="pb-2">{t('col_note')}</th>
</tr>
</thead>
<tbody>
<tbody className="[&_td:not(:first-child)]:pl-4">
{payments.map((p) => (
<tr key={p.id} className="border-b last:border-0">
<td className="py-2 tabular-nums">{formatDate(p.payment_date)}</td>