From d583a4e5bb3e5d9e6ab9a63d82b5b63e79d0abd1 Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <jakob.wennberg@arcim.io>
Date: Thu, 13 Aug 2026 15:16:52 +0200
Subject: [PATCH] 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>
---
 app/(dashboard)/supplier-invoices/[id]/page.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/(dashboard)/supplier-invoices/[id]/page.tsx b/app/(dashboard)/supplier-invoices/[id]/page.tsx
index eb1c1e98..68f15615 100644
--- a/app/(dashboard)/supplier-invoices/[id]/page.tsx
+++ b/app/(dashboard)/supplier-invoices/[id]/page.tsx
@@ -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>