sax3l/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
#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
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/customers/page.tsx
+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}`}
app/(dashboard)/salary/page.tsx
+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>
components/bookkeeping/ChartOfAccountsManager.tsx
+3 -1
View File
@@ -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 && (
components/bookkeeping/JournalEntryList.tsx
+3 -1
View File
@@ -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 && (
components/transactions/SkattekontoInboxCard.tsx
+5 -1
View File
@@ -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">
components/transactions/TransactionHistoryList.tsx
+5 -2
View File
@@ -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">