## Why
### Problem
The cashflow breakdown cards (Income Sources / Expense Categories)
overflow the viewport width on mobile devices. The row items (icon,
category name, trend indicator, percentage, amount) don't fit within the
narrow mobile viewport because all non-name elements are `shrink-0`,
leaving insufficient space.
Additionally, a leftover `bg-red-500` debug class was present on the
breakdown cards grid container.
## What
### Changes
- Restructured breakdown card rows into two groups (label side / data
side) with `max-w-[60%]` on the label group so the category name
truncates with ellipsis before pushing data off-screen
- Added `overflow-hidden` to the row flex container to prevent content
spilling
- Hidden the percentage text label on mobile (`hidden sm:inline`) — the
progress bar still conveys this visually
- Removed leftover `bg-red-500` debug class from the cashflow page grid
- Switched breakdown cards grid to explicit `grid-cols-1` on mobile for
clarity
## Verification
### Manual
Tested visually on mobile viewport — breakdown cards now fit within the
screen width, matching the Dashboard's TopCategoriesCard behavior.
c03f576758