fix(analysis): truncate long breakdown names so amounts stay in widget (#518)

## What

Long category/label names in the shared bar-list breakdowns (cash-flow
top expenses/income, dashboard top categories, analysis drawer
categories/tags/accounts) spilled the amount out past the widget's right
edge.

## Why

The name span already had `truncate min-w-0 flex-1`, but its `grow` row
wrapper (the `<Link>`/`<div>`) had no `min-w-0`. Flex items default to
`min-width: auto`, so the wrapper refused to shrink below its content —
the inner `truncate` never engaged.

## Change

Add `min-w-0` to both `grow` wrappers so the row can shrink and the
existing `truncate` clamps the name with an ellipsis, keeping the amount
inside the widget.

Visual-only CSS class change.
This commit is contained in:
Víctor Falcón 2026-06-10 21:58:36 +02:00 committed by GitHub
parent bcd025f1b1
commit 49acc8a884
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 2 additions and 2 deletions

View File

@ -134,12 +134,12 @@ export function CategoryBreakdownRow<T>({
{href ? (
<Link
href={href}
className="group block grow rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
className="group block min-w-0 grow rounded-md px-1.5 py-1 transition-colors hover:bg-muted"
>
{header}
</Link>
) : (
<div className="grow px-1.5 py-1">{header}</div>
<div className="min-w-0 grow px-1.5 py-1">{header}</div>
)}
</div>
<Progress