From e631cbba69d8184f5efbb4c65d198a836a9ab883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Tue, 30 Jun 2026 12:37:20 +0200
Subject: [PATCH] fix(settings): vertically center rows in automation rules and
 labels tables (#615)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Row contents in the **Automation rules** and **Labels** settings tables
were not vertically centered — the title, badges and the actions ("…")
button sat slightly above the row's vertical center.

## Why

The shared `TableCell` defaults to `align-top`, while the actions button
is centered. That mismatch pushed the text/badges up relative to the
menu. Overriding the data cells with `align-middle` in both tables makes
every element line up.

## Changes

- `resources/js/pages/settings/automation-rules.tsx` — `align-middle` on
body cells
- `resources/js/pages/settings/labels.tsx` — `align-middle` on body
cells

## Before / After

**Automation rules**

![Automation rules row
alignment](https://raw.githubusercontent.com/whisper-money/whisper-money/automations-table/.github/screenshots/automation-rules-row-alignment.png)

**Labels**

![Labels row
alignment](https://raw.githubusercontent.com/whisper-money/whisper-money/automations-table/.github/screenshots/labels-row-alignment.png)
---
 resources/js/pages/settings/automation-rules.tsx | 5 ++++-
 resources/js/pages/settings/labels.tsx           | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/settings/automation-rules.tsx b/resources/js/pages/settings/automation-rules.tsx
index 7bc37f68..6a387dd7 100644
--- a/resources/js/pages/settings/automation-rules.tsx
+++ b/resources/js/pages/settings/automation-rules.tsx
@@ -155,7 +155,10 @@ function AutomationRuleRow({
                         {row
                             .getVisibleCells()
                             .map((cell: Cell<AutomationRule, unknown>) => (
-                                <TableCell key={cell.id}>
+                                <TableCell
+                                    key={cell.id}
+                                    className="align-middle"
+                                >
                                     {flexRender(
                                         cell.column.columnDef.cell,
                                         cell.getContext(),
diff --git a/resources/js/pages/settings/labels.tsx b/resources/js/pages/settings/labels.tsx
index 8fcf0124..75d6f65f 100644
--- a/resources/js/pages/settings/labels.tsx
+++ b/resources/js/pages/settings/labels.tsx
@@ -121,7 +121,10 @@ function LabelRow({ row }: { row: Row<Label> }) {
                         {row
                             .getVisibleCells()
                             .map((cell: Cell<Label, unknown>) => (
-                                <TableCell key={cell.id}>
+                                <TableCell
+                                    key={cell.id}
+                                    className="align-middle"
+                                >
                                     {flexRender(
                                         cell.column.columnDef.cell,
                                         cell.getContext(),