fix(analysis): align summary card amounts to a common baseline (#515)

## 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.
This commit is contained in:
Víctor Falcón 2026-06-09 16:09:07 +02:00 committed by GitHub
parent 7cc49a5368
commit 21f8f3b277
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 5 deletions

View File

@ -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}