Skip to content
Casaconomy Book

CAS-3762 — UI Conformance Audit: Responsive Table Foundation + Mobile/Desktop Readiness

Delivered 2026-05-19. Four sub-epics: CAS-3765 through CAS-3768.

What shipped

Phase 1 — Audit (PR #1026)

A full pass over all data-display surfaces identified conformance gaps against docs/ux-guidelines.md: inconsistent table implementations, missing mobile card modes, action columns failing the 44 px touch target rule, and undocumented patterns for forms and typography.

Phase A — ResponsiveDataTable foundation (CAS-3765, PR #1033)

src/components/ui/styled-table/StyledTable.tsx was hardened into the canonical shared data table. Key additions:

  • mobileMode="cards" — stacks rows as key/value cards at ≤ 390 px (UX-IOS-02)
  • mobileMode="table" — standard horizontal table on desktop
  • Column-level collapseOnMobile: true flag — moves action columns to the card footer on mobile; wrap action content in a minHeight: 44 box (UX-TOUCH-01)
  • Column hiding, filtering, and sorting controls (desktop only)
  • TableColumn / StyledTableProps contract defined in src/types/TableTypes.ts

Phase B — Settings/admin migration (CAS-3766, PR #1035)

Settings pages and admin tables migrated from ad-hoc inline <Table> usage to EnhancedStyledTable (re-exported from StyledTable.tsx).

Phase C — Modal table migration (CAS-3767, PR #1036)

src/components/ui/modal-data-list/ModalDataList.tsx introduced as a thin wrapper for modal and sheet contexts. Enforces:

  • mobileMode="cards" unconditionally — modals are constrained
  • overflowX: auto — desktop escape hatch inside modal widths
  • No sort / filter / column-hide controls (modal context is read-only preview)

Usage pattern for action columns inside modals:

<ModalDataList
  data={rows}
  columns={[
    { accessor: 'name', header: 'Name' },
    {
      accessor: 'actions',
      header: '',
      collapseOnMobile: true,
      render: (row) => (
        <Box style={{ minHeight: 44, display: 'flex', alignItems: 'center' }}>
          <ActionButton row={row} />
        </Box>
      ),
    },
  ]}
/>

Phase D — Guideline expansion (CAS-3768, PR #1031)

docs/ux-guidelines.md expanded with:

  • Typography scale and heading hierarchy rules
  • Form layout patterns and validation display
  • Data-display responsiveness rules (when to use cards vs table vs list)

File map

ComponentPath
EnhancedStyledTablesrc/components/ui/styled-table/StyledTable.tsx
ModalDataListsrc/components/ui/modal-data-list/ModalDataList.tsx
StyledTableProps, TableColumnsrc/types/TableTypes.ts
UX guidelinesdocs/ux-guidelines.md

Rules of the road

  • All new data tables must use EnhancedStyledTable (import as EnhancedStyledTable from @/components/ui/styled-table/StyledTable).
  • Modal/sheet data tables must use ModalDataList instead of EnhancedStyledTable directly.
  • Action columns that render inside a table: collapseOnMobile: true + 44 px minimum touch target (UX-TOUCH-01).
  • Desktop-only controls (sort/filter/hide) are on by default in EnhancedStyledTable and off by default in ModalDataList.