c03f576758
## 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. |
||
|---|---|---|
| .. | ||
| css | ||
| js | ||
| views | ||