From 49acc8a884617fc8a97e7b82e7dcedb5931a20b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Wed, 10 Jun 2026 21:58:36 +0200
Subject: [PATCH] fix(analysis): truncate long breakdown names so amounts stay
 in widget (#518)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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.
---
 resources/js/components/shared/category-breakdown-list.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/shared/category-breakdown-list.tsx b/resources/js/components/shared/category-breakdown-list.tsx
index d5e56cad..f4efab41 100644
--- a/resources/js/components/shared/category-breakdown-list.tsx
+++ b/resources/js/components/shared/category-breakdown-list.tsx
@@ -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