From 21f8f3b27719f3ff47b4769e5fdda00c323fe22d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Tue, 9 Jun 2026 16:09:07 +0200
Subject: [PATCH] fix(analysis): align summary card amounts to a common
 baseline (#515)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

In the transaction **analysis drawer**, the summary cards' amounts
weren't lining up horizontally: the **Avg / day** card's label row holds
the day-editor button (a 24px icon button), making that row taller than
a plain text label, so its amount sat lower than **Total spent**.

## Fix

Give every summary card's label row a fixed `h-6` (matching the
icon-button height), so all label rows are the same height and the
amounts share a common baseline. Amounts were already the same size
(`text-lg`); this just equalizes the vertical space above them.

Applies to all summary tiles — expense mode (Total spent / Avg per day)
and income mode (Income / Expenses / Net / Margin).

## Before / After
- Before: Avg/day amount offset below Total spent.
- After: both amounts aligned on the same row.

Frontend tests (9) pass; eslint + prettier clean.
---
 .../transactions/transaction-analysis-drawer.tsx   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/transactions/transaction-analysis-drawer.tsx b/resources/js/components/transactions/transaction-analysis-drawer.tsx
index 06acf631..f1251b88 100644
--- a/resources/js/components/transactions/transaction-analysis-drawer.tsx
+++ b/resources/js/components/transactions/transaction-analysis-drawer.tsx
@@ -605,9 +605,11 @@ function SummaryCards({
                         tone={net >= 0 ? 'income' : 'expense'}
                     />
                     <div className="rounded-lg bg-muted/50 p-4">
-                        <p className="text-xs text-muted-foreground">
-                            {__('Margin')}
-                        </p>
+                        <div className="flex h-6 items-center">
+                            <p className="text-xs text-muted-foreground">
+                                {__('Margin')}
+                            </p>
+                        </div>
                         <p
                             className={cn(
                                 'mt-1 text-lg font-semibold tabular-nums',
@@ -627,7 +629,7 @@ function SummaryCards({
                         tone="expense"
                     />
                     <div className="rounded-lg bg-muted/50 p-4">
-                        <div className="flex items-center justify-between">
+                        <div className="flex h-6 items-center justify-between">
                             <p className="text-xs text-muted-foreground">
                                 {__('Avg / day')}
                             </p>
@@ -670,7 +672,9 @@ function SummaryCard({
 }) {
     return (
         <div className="rounded-lg bg-muted/50 p-4">
-            <p className="text-xs text-muted-foreground">{label}</p>
+            <div className="flex h-6 items-center">
+                <p className="text-xs text-muted-foreground">{label}</p>
+            </div>
             <AmountDisplay
                 amountInCents={amount}
                 currencyCode={currency}