fix(ui): clip the flexible list cell on the rows #2003 missed (#2284)

#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>
This commit is contained in:
bjornbergenheim
2026-09-08 17:07:33 +02:00
committed by GitHub
co-authored by Claude Opus 5
parent 2f787a2b3c
commit c091a7f28e
6 changed files with 22 additions and 7 deletions
+3 -1
View File
@@ -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}`}
+3 -1
View File
@@ -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>