From d11aa2dfe579e0a9af27909d51ac776f975b3073 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= Date: Mon, 22 Jun 2026 16:03:44 +0200 Subject: [PATCH] fix(transactions): restore left padding when category is first column (#582) ## What The category column in the transactions table drops its left padding (`pl-0`) so it aligns flush when preceded by other columns. But when the user hides the columns to its left (select, date), the category becomes the first column and loses the table's default left padding, sitting flush against the table edge. ## Fix Add a `first:pl-2` Tailwind variant to the category cell. When the cell is `:first-child` (no column to its left), it restores the default `pl-2` padding; otherwise it keeps `pl-0`. The `:first-child` pseudo-class gives it higher specificity than `pl-0`, so it wins only in that case. Columns hidden via view options are removed from the DOM (TanStack), so the category is `:first-child` exactly when it genuinely has no column to its left. Applies to both the header and body cells, since both consume `meta.cellClassName`. --- resources/js/components/transactions/transaction-columns.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/transactions/transaction-columns.tsx b/resources/js/components/transactions/transaction-columns.tsx index 6b9eda84..f1180261 100644 --- a/resources/js/components/transactions/transaction-columns.tsx +++ b/resources/js/components/transactions/transaction-columns.tsx @@ -139,7 +139,7 @@ export function createTransactionColumns({ meta: { label: __('Category'), cellClassName: - 'pl-0 max-w-[170px] !sm:max-w-[170px] md:max-w-[190px] !min-w-[170px] whitespace-normal', + 'pl-0 first:pl-2 max-w-[170px] !sm:max-w-[170px] md:max-w-[190px] !min-w-[170px] whitespace-normal', }, header: () => __('Category'), cell: ({ row }) => {