From d2806b5887753aca2d7ccce8b2360107541890bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 22 Jun 2026 18:51:50 +0200
Subject: [PATCH] fix(transactions): pad Category column when Date column is
 hidden (#584)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #583

When the Date column is toggled off, the Category column becomes the
leftmost data column. It carried a static `pl-0` (to sit tight after
Date), so it ended up flush against the table edge with no left padding
— visible at `< md` widths where the `select` checkbox column is hidden.

#582 tried a CSS `first:pl-2`, but the `select` cell (`hidden
md:table-cell`) is `display:none` yet still the DOM `:first-child`, so
`first:` never matches Category. This drives the padding from the Date
column's visibility instead: keep `pl-0` while Date is shown, restore
`pl-2` when it is hidden (replacing the inert `first:pl-2`).

## Test
`createTransactionColumns` unit test asserting the Category
`cellClassName` flips `pl-0` ↔ `pl-2` with `isDateHidden`.
---
 .../transactions/transaction-columns.test.tsx | 44 +++++++++++++++++++
 .../transactions/transaction-columns.tsx      |  5 ++-
 .../transactions/transaction-list.tsx         |  2 +
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/components/transactions/transaction-columns.test.tsx

diff --git a/resources/js/components/transactions/transaction-columns.test.tsx b/resources/js/components/transactions/transaction-columns.test.tsx
new file mode 100644
index 00000000..7ee7a82c
--- /dev/null
+++ b/resources/js/components/transactions/transaction-columns.test.tsx
@@ -0,0 +1,44 @@
+import type { DecryptedTransaction } from '@/types/transaction';
+import type { ColumnDef } from '@tanstack/react-table';
+import { describe, expect, it } from 'vitest';
+import { createTransactionColumns } from './transaction-columns';
+
+function categoryClassName(columns: ColumnDef<DecryptedTransaction>[]): string {
+    const category = columns.find(
+        (column) =>
+            'accessorKey' in column && column.accessorKey === 'category_id',
+    );
+
+    return (category?.meta as { cellClassName?: string }).cellClassName ?? '';
+}
+
+function buildColumns(isDateHidden: boolean) {
+    return createTransactionColumns({
+        categories: [],
+        accounts: [],
+        banks: [],
+        labels: [],
+        locale: 'en',
+        onEdit: () => {},
+        onDelete: () => {},
+        onUpdate: () => {},
+        onReEvaluateRules: () => {},
+        isDateHidden,
+    });
+}
+
+describe('createTransactionColumns category padding', () => {
+    it('collapses the Category left padding while the Date column is shown', () => {
+        const className = categoryClassName(buildColumns(false));
+
+        expect(className).toContain('pl-0');
+        expect(className).not.toContain('pl-2');
+    });
+
+    it('restores the Category left padding when the Date column is hidden', () => {
+        const className = categoryClassName(buildColumns(true));
+
+        expect(className).toContain('pl-2');
+        expect(className).not.toContain('pl-0');
+    });
+});
diff --git a/resources/js/components/transactions/transaction-columns.tsx b/resources/js/components/transactions/transaction-columns.tsx
index f1180261..700e8358 100644
--- a/resources/js/components/transactions/transaction-columns.tsx
+++ b/resources/js/components/transactions/transaction-columns.tsx
@@ -42,6 +42,7 @@ interface CreateColumnsOptions {
         source: 'transaction_table',
     ) => void;
     onReEvaluateRules: (transaction: DecryptedTransaction) => void;
+    isDateHidden?: boolean;
 }
 
 export function createTransactionColumns({
@@ -55,6 +56,7 @@ export function createTransactionColumns({
     onUpdate,
     onCategorized,
     onReEvaluateRules,
+    isDateHidden = false,
 }: CreateColumnsOptions): ColumnDef<DecryptedTransaction>[] {
     return [
         {
@@ -138,8 +140,7 @@ export function createTransactionColumns({
             accessorKey: 'category_id',
             meta: {
                 label: __('Category'),
-                cellClassName:
-                    'pl-0 first:pl-2 max-w-[170px] !sm:max-w-[170px] md:max-w-[190px] !min-w-[170px] whitespace-normal',
+                cellClassName: `${isDateHidden ? 'pl-2' : 'pl-0'} max-w-[170px] !sm:max-w-[170px] md:max-w-[190px] !min-w-[170px] whitespace-normal`,
             },
             header: () => __('Category'),
             cell: ({ row }) => {
diff --git a/resources/js/components/transactions/transaction-list.tsx b/resources/js/components/transactions/transaction-list.tsx
index 32946b05..ef9f6525 100644
--- a/resources/js/components/transactions/transaction-list.tsx
+++ b/resources/js/components/transactions/transaction-list.tsx
@@ -820,6 +820,7 @@ export function TransactionList({
             onUpdate: updateTransaction,
             onCategorized: showAutomatizeToast,
             onReEvaluateRules: handleReEvaluateRules,
+            isDateHidden: columnVisibility.transaction_date === false,
         });
 
         if (hideColumns.length === 0) {
@@ -841,6 +842,7 @@ export function TransactionList({
         showAutomatizeToast,
         handleReEvaluateRules,
         hideColumns,
+        columnVisibility,
     ]);
 
     const table = useReactTable({