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:
parent
7cc49a5368
commit
21f8f3b277
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue