Settings pages: responsive card layout on mobile (Rules, Users, Tags)

Status: Delivered
CAS: CAS-2461
Delivered: 2026-05-12
PRs: #631

What’s new

Three settings pages that previously showed desktop-style tables — Rules, Users, and Tags — now render as scrollable card lists on mobile. Each card presents the row data vertically with tap-safe action buttons. Desktop layout is unchanged.

How to use it

On any phone-sized screen (≤ 768 px):

Settings → Rules: each rule appears as a card with name, condition summary, enable/disable toggle, and Edit/Delete buttons.
Settings → Users: each household member is a card with display name, role, and action icons.
Settings → Tags: each tag is a card with colour swatch, name, and action icons.

On desktop the existing table layout is shown as before — no change.

What changed under the hood

New shared MobileDataCard component wraps GlassCard with a title slot, optional prefix (colour swatch or badge), stacked label/value field pairs, and an actions slot.
UserSettingsPage, TagSettingsPage, and RuleTable each conditionally render either the new card stack (mobile) or the existing table (desktop) using the useIsMobile hook.
All row-level action buttons use ActionIcon size="lg" (≥ 44 px touch target) on mobile.

Why we built it

The mobile UX audit (CAS-2390) found that three core settings pages were effectively unusable on phones: wide table columns overflowed the viewport, row data was clipped, and action buttons were too small to tap reliably. This delivery applies a single shared card pattern across all three pages in one go, closing the overflow and tap-target findings from the audit.

Known limitations / follow-on work

The card pattern is applied to Rules, Users, and Tags only; other settings pages (Notifications, License) were not in scope for this audit cluster.
MobileTransactionList (a parallel mobile list component for the Transactions view) was filed separately and is not part of this delivery.