From c091a7f28eff57eb8aa29fd3e6b0e78ab0d5a030 Mon Sep 17 00:00:00 2001
From: bjornbergenheim <29535152+bjornbergenheim@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:07:33 +0200
Subject: [PATCH] fix(ui): clip the flexible list cell on the rows #2003 missed
 (#2284)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#2003 gave TransactionInboxCard overflow-hidden because its shrink-0 row
markers cannot truncate: past the width that fits them the cell painted
over the Belopp column instead of clipping. Six other rows carry the same
`max-w-0 w-full` flexible cell with shrink-0 chips inside and never got
the guard, so they still overlap the neighbouring column.

Reproduced on /transactions with a Skatteverket row whose booking
suggestion is long ("Bokförs mot 2731 Avräkning lagstadgade sociala
avgifter"): the text runs straight through the amount. Seen in both
Chrome and Firefox, so this is not engine specific; Firefox only reaches
it sooner, because it ignores the max-w-0 cap on a td when sizing
columns (CSS 2.1 10.4 leaves max-width on table cells undefined).

Rows fixed: the skattekonto inbox row, both rows in the transaction
history list, the verifikat list, the chart of accounts, the customer
list and the salary run list. ChartOfAccountsManager's second flexible
cell is left alone: its only child truncates, so it has nothing that can
overflow.

Signed-off-by: Bjorn Bergenheim <29535152+bjornbergenheim@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 app/(dashboard)/customers/page.tsx                 | 4 +++-
 app/(dashboard)/salary/page.tsx                    | 4 +++-
 components/bookkeeping/ChartOfAccountsManager.tsx  | 4 +++-
 components/bookkeeping/JournalEntryList.tsx        | 4 +++-
 components/transactions/SkattekontoInboxCard.tsx   | 6 +++++-
 components/transactions/TransactionHistoryList.tsx | 7 +++++--
 6 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/(dashboard)/customers/page.tsx b/app/(dashboard)/customers/page.tsx
index deeafdfe..0691c5e6 100644
--- a/app/(dashboard)/customers/page.tsx
+++ b/app/(dashboard)/customers/page.tsx
@@ -352,7 +352,9 @@ function CustomersPageInner() {
                       className="group cursor-pointer transition-colors duration-150 hover:bg-secondary/35"
                       onClick={() => router.push(`/customers/${customer.id}`)}
                     >
-                      <td className={cn(TD_CLASS, 'max-w-0 w-full')}>
+                      {/* overflow-hidden: see #2003, the shrink-0 verified
+                          badge cannot truncate. */}
+                      <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
                         <span className="flex min-w-0 items-center gap-2">
                           <Link
                             href={`/customers/${customer.id}`}
diff --git a/app/(dashboard)/salary/page.tsx b/app/(dashboard)/salary/page.tsx
index 8ba15833..778a3116 100644
--- a/app/(dashboard)/salary/page.tsx
+++ b/app/(dashboard)/salary/page.tsx
@@ -213,7 +213,9 @@ export default function SalaryPage() {
                             {periodOf(run)}
                           </Link>
                         </td>
-                        <td className={cn(TD_CLASS, 'max-w-0 w-full whitespace-nowrap')}>
+                        {/* overflow-hidden: see #2003, nothing in this cell
+                            truncates so it must clip. */}
+                        <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden whitespace-nowrap')}>
                           <span className="inline-flex items-center gap-2">
                             {run.status === 'booked' ? (
                               <span className="text-muted-foreground">{t('status_booked')}</span>
diff --git a/components/bookkeeping/ChartOfAccountsManager.tsx b/components/bookkeeping/ChartOfAccountsManager.tsx
index 81a79150..6a75e908 100644
--- a/components/bookkeeping/ChartOfAccountsManager.tsx
+++ b/components/bookkeeping/ChartOfAccountsManager.tsx
@@ -748,7 +748,9 @@ export default function ChartOfAccountsManager() {
                               <td className={cn(TD_CLASS, 'whitespace-nowrap tabular-nums')}>
                                 <AccountNumber number={account.account_number} name={account.account_name} />
                               </td>
-                              <td className={cn(TD_CLASS, 'max-w-0 w-full')}>
+                              {/* overflow-hidden: see #2003, the shrink-0
+                                  markers cannot truncate. */}
+                              <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
                                 <span className="flex min-w-0 items-center gap-1.5">
                                   <span className="truncate">{account.account_name}</span>
                                   {account.is_system_account && (
diff --git a/components/bookkeeping/JournalEntryList.tsx b/components/bookkeeping/JournalEntryList.tsx
index d64f5ae8..551eb52e 100644
--- a/components/bookkeeping/JournalEntryList.tsx
+++ b/components/bookkeeping/JournalEntryList.tsx
@@ -1606,7 +1606,9 @@ export default function JournalEntryList({
                       <td className={cn(TD_CLASS, 'hidden sm:table-cell whitespace-nowrap tabular-nums text-muted-foreground', struckCell)}>
                         {formatDate(entry.entry_date)}
                       </td>
-                      <td className={cn(TD_CLASS, 'max-w-0 w-full')}>
+                      {/* overflow-hidden: see #2003, the shrink-0 status
+                          chips cannot truncate and would paint over Belopp. */}
+                      <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
                         <span className="flex min-w-0 items-center gap-2">
                           <span className={cn('truncate', struckCell)}>{entry.description}</span>
                           {entry.out_of_period && (
diff --git a/components/transactions/SkattekontoInboxCard.tsx b/components/transactions/SkattekontoInboxCard.tsx
index 4db34745..c52168ed 100644
--- a/components/transactions/SkattekontoInboxCard.tsx
+++ b/components/transactions/SkattekontoInboxCard.tsx
@@ -102,7 +102,11 @@ export default function SkattekontoInboxCard({
       <td className={cn(TD_CLASS, '!pl-0 whitespace-nowrap tabular-nums text-muted-foreground')}>
         {formatDate(row.transaktionsdatum)}
       </td>
-      <td className={cn(TD_CLASS, 'max-w-0 w-full')}>
+      {/* overflow-hidden: the shrink-0 chips below don't truncate, so on a
+          viewport too narrow for them the cell must clip instead of painting
+          over the Belopp column. Same guard #2003 put on TransactionInboxCard;
+          this row and the ones below never got it. */}
+      <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
         <span className="row-collapsible flex min-w-0 items-center gap-2">
           <span className="truncate">{row.transaktionstext}</span>
           <Badge variant="outline" className="h-4 shrink-0 gap-1 px-1.5 py-0 text-[10px] font-normal">
diff --git a/components/transactions/TransactionHistoryList.tsx b/components/transactions/TransactionHistoryList.tsx
index d221bbdd..9b7c9e39 100644
--- a/components/transactions/TransactionHistoryList.tsx
+++ b/components/transactions/TransactionHistoryList.tsx
@@ -318,7 +318,9 @@ function BankHistoryRow({
       <td className={cn(TD_CLASS, '!pl-0 whitespace-nowrap tabular-nums text-muted-foreground')}>
         {formatDate(transaction.date)}
       </td>
-      <td className={cn(TD_CLASS, 'max-w-0 w-full')}>
+      {/* overflow-hidden: see #2003, the shrink-0 markers below cannot
+          truncate and would paint over Belopp. */}
+      <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
         <span className="row-collapsible flex min-w-0 items-center gap-2">
           <span className="truncate">{transaction.description}</span>
           <TransactionAttachmentIndicator
@@ -490,7 +492,8 @@ function SkattekontoHistoryRow({
       <td className={cn(TD_CLASS, '!pl-0 whitespace-nowrap tabular-nums text-muted-foreground')}>
         {formatDate(row.transaktionsdatum)}
       </td>
-      <td className={cn(TD_CLASS, 'max-w-0 w-full')}>
+      {/* overflow-hidden: see the bank row above. */}
+      <td className={cn(TD_CLASS, 'max-w-0 w-full overflow-hidden')}>
         <span className="flex min-w-0 items-center gap-2">
           <span className="truncate">{row.transaktionstext}</span>
           <Badge variant="outline" className="h-4 shrink-0 gap-1 px-1.5 py-0 text-[10px] font-normal">