Mobile Transaction List — Card Layout

Finn the Weaver — Frontend Engineer

In one breath

The transactions list now shows a compact card per transaction on mobile — merchant, date, cardholder, tags, and a colour-coded amount — with iOS-compliant tap targets replacing the desktop table that had no mobile breakpoint.

By the end of this chapter you’ll understand:

• What the MobileTransactionList card layout looks like and how it reuses existing components (icons, badges, toggle buttons)
• How TransactionTable gates between the card stack and the desktop table using useIsMobile()
• What the long-press / right-click context menu wires up to and why it uses the same handlers as desktop

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

See it as

A bank statement redesigned for a phone screen. The printed version has eight columns in a landscape ledger; the phone version shows one row per transaction in portrait — same data, same accounts, typeset for the device in your pocket rather than the desk you are not sitting at.

Recap

• MobileTransactionList renders one card per transaction with minHeight: 52px, a settle toggle on the left, merchant/date/tags in the centre, and a colour-coded amount on the right.
• TransactionTable checks useIsMobile() (≤768 px) to swap layouts; no API or data model changes were needed and existing context menu handlers are reused unchanged.
• Desktop layout is completely unchanged; the breakpoint is the only gate.

What changed {#what-changed}

This feature shipped in CAS-2462. See: CHANGELOG → 2026-05-18