Mobile Transaction List — Card Layout

Status: Delivered
CAS: CAS-2462
Delivered: 2026-05-12
PRs: #632, #640

What’s new

The transactions list (/transactions) now renders a purpose-built card layout on mobile (≤768 px). Previously, the desktop table was served unchanged to iPhone-width viewports — columns stacked awkwardly, tap targets were undersized, and amounts were hard to scan. You now see one compact card per transaction with clear typographic hierarchy and iOS-compliant tap targets.

How to use it

Open /transactions on any mobile device or a browser window narrowed to ≤768 px. Each transaction appears as a card:

Left column: settle toggle (tap to mark settled/unsettled)
Centre: merchant name (bold), date · cardholder, and any tag badges below
Right column: amount in fw=700 — red for debits, green for credits/refunds — with a privacy icon when applicable

Long-press / right-click a card to reach the existing context menu (settle, assign category, tag). The desktop table is completely unchanged when the viewport is wider than 768 px.

What changed under the hood

New component src/components/transactions/MobileTransactionList.tsx — card stack, each row minHeight: 52px (≥ iOS HIG 44px tap target floor)
TransactionTable.tsx gates on useIsMobile() (≤768px) to swap <StyledTable> for <MobileTransactionList> — no API or data model changes
Reuses existing getIconComponent, Mantine Badge, and ToggleIconButton — no new dependencies
Context menu, settle toggle, and privacy toggle wired through the same handlers as the desktop path

Why we built it

Transactions is the most-used daily surface in Casaconomy. On a 375px iPhone the desktop table had no mobile breakpoint — the date, merchant, and amount columns either clipped or wrapped unpredictably, making it hard to scan a month of spending quickly. This change brings the core bookkeeping view up to the same mobile standard as the other list surfaces (invoices, groups) that were addressed in the CAS-2390 mobile UX audit.

Known limitations / follow-on work

Swipe-to-settle gesture not yet implemented (tap toggle only)
Search and filter controls above the list are not yet mobile-optimised (tracked in CAS-2390 backlog)
No Maestro smoke test for the mobile card path yet