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:
parent
bcd025f1b1
commit
49acc8a884
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue