Phase 1 UI Conformance Audit

Envoy (Eivind the Listener)
Delivered 2026-05-19 · Scope: src/pages/** + high-impact table/modal/form components in src/components/**

In one breath

Library adoption is partial and uneven: 18 table-bearing surfaces rely on fixed widths and nowrap that are brittle on phones. The limiting factor is tabular surfaces and modal-table interactions — not raw <table> usage, which is down to one.

By the end of this review you will know:

• Which surface clusters carry the highest conformance risk and why
• The overall mobile + desktop readiness verdict by cluster (the matrix)
• The prioritised three-wave remediation backlog

---

Executive findings

1. Library adoption is partial and uneven.

• 13/35 pages import Mantine core directly; several settings/data surfaces still compose raw Mantine tables/forms/modals instead of using house abstractions.
• Existing shared table abstraction (StyledTable) is used in some transaction/rules surfaces but not adopted by most settings/admin tables.

2. The main conformance risk is data-display responsiveness, not raw <table> prevalence.

• Only one production raw HTML <table> remains (src/components/transactions/TransactionSummaryTable.tsx).
• But 18 table-bearing files still rely on fixed widths, nowrap, and truncation patterns that are brittle on phones and narrow desktop windows.

3. Guideline coverage itself has structural gaps.

• Current v0 has strong rules for layout/safe-area/contrast/touch/system-states.
• Stubs remain for typography, navigation IA, forms/validation, and motion; many audit findings land as policy gaps rather than violations — they cannot be cited as UX-* rule breaches yet.

---

Surface clusters

Cluster A — Settings/admin table surfaces (direct Mantine Table usage)

Surfaces:

• src/pages/GroupsSettingsPage.tsx
• src/pages/UserSettingsPage.tsx
• src/pages/TagSettingsPage.tsx
• src/pages/ProviderSettingsPage.tsx
• src/pages/SettlePeriodHistoryPage.tsx
• src/pages/SyncSettingsPage.tsx
• src/pages/GroupDetailPage.tsx
• src/pages/InvoiceQueuePage.tsx

Findings:

• Repeated hand-built Table.Thead/Table.Tbody markup and per-cell inline width logic.
• Repeated row action columns without a shared responsive collapse behavior.
• Mixed truncation + nowrap heuristics (readability and scanability drift).

Guideline mapping:

• Violates or risks UX-LAYOUT-04 (readable envelope) on narrow viewports.
• Risks UX-TOUCH-01 and UX-TOUCH-02 for dense action cells on mobile.
• When empty/error variants are ad hoc, risks UX-STATE-01 and UX-STATE-03.

Cluster B — Rule/invoice preview modal tables

Surfaces:

• src/components/rules/ApplyRulesModal.tsx
• src/components/rules/InvoicePreviewModal.tsx
• src/components/rules/CleanupPreview.tsx

Findings:

• Table columns use fixed pixel and percentage widths (120px, 260px, 50%) with dense action zones.
• Mobile behavior depends on truncation/nowrap rather than explicit responsive layout strategy.

Guideline mapping:

• Risks UX-LAYOUT-04 and UX-TOUCH-01.
• For modal focus + action density, should be explicitly checked against UX-IOS-02 on phone.

Cluster C — Existing shared abstraction: low adoption

• Reusable: src/components/ui/styled-table/StyledTable.tsx (aliased via src/components/common/StyledTable.tsx)
• Confirmed consumers: src/components/rules/RuleTable.tsx, src/components/transactions/TransactionTable.tsx

Finding: Library capability exists but is not the default path for settings/admin data surfaces; teams still hand-roll tables.

---

Conformance by guideline area

Guideline area	Status	Rules
Layout + safe area	Partial pass — dynamic verification pending	UX-LAYOUT-01/02/03, UX-IOS-01/02
Readable width / responsive content density	Fail on multiple surfaces	UX-LAYOUT-04
Touch ergonomics	At-risk / fail on table-heavy settings pages	UX-TOUCH-01/02/03
Empty / loading / error state quality	Unknown — static only, interactive check pending	UX-STATE-01/02/03/04

---

Mobile + desktop readiness matrix

Surface cluster	Desktop	Mobile	Key risk
Dashboard / home / settings shell	Medium-High	Medium	Inconsistent use of shared primitives
Settings/admin tabular pages	Medium	Low	Fixed-width + dense action cells
Transaction/rule tables using StyledTable	Medium-High	Medium	Abstraction exists, adoption incomplete
Modal table previews (rules/invoices)	Medium	Low	Narrow viewport overflow / tap density
Mobile dedicated pages (Mobile*)	Medium	Medium	Mixed primitive vs shared component patterns

Verdict: Global readiness for broad mobile + desktop consistency is Medium-Low today. The limiting factor is tabular surfaces and modal-table interactions.

---

Remediation backlog

P0 — First execution wave

• Standardize settings/admin table surfaces onto ResponsiveDataTable (or evolve StyledTable to fill this role).
• Target: Groups, Users, Tags, Providers, Settle history, Sync settings, Group detail, Invoice queue.
• Goal: remove per-page width/nowrap action-cell implementations and enforce mobile behavior centrally.

P1

• Consolidate modal table previews (ApplyRulesModal, InvoicePreviewModal, CleanupPreview) onto ModalDataList behavior with explicit phone mode.
• Add guideline sections currently stubbed in v0 for: forms/validation, typography hierarchy, data-display responsiveness. Include stable UX-* IDs so future audits cite policy, not UX-UNGOVERNED gaps.

P2

• Build a lightweight static conformance check script that flags: new raw <table> usage, fixed pixel widths in table headers/cells, direct Mantine table usage outside approved wrappers.

Proposed shared component APIs (specialist detail)

1) ResponsiveDataTable

<ResponsiveDataTable
  columns={columns}
  rows={rows}
  rowKey="id"
  density="comfortable"
  mobileMode="cards"
  actions={{ label: 'Actions', render: (row) => <RowActions row={row} /> }}
  emptyState={{ title: 'No providers', cta: <Button>Add provider</Button> }}
/>

2) SettingsFormSection

<SettingsFormSection
  title="Provider sync"
  description="Configure polling and credentials"
  fields={...}
  footerActions={{ primary: saveBtn, secondary: resetBtn }}
/>

3) ModalDataList

<ModalDataList
  title="Rule preview"
  columns={columns}
  rows={rows}
  mobileMode="stacked"
  stickyActions
/>

Recommended Phase 2 child-CAS split:

1. CAS-3762-A: Shared table component hardening (ResponsiveDataTable/StyledTable evolution)
2. CAS-3762-B: Settings/admin table migration wave
3. CAS-3762-C: Modal table/list migration wave
4. CAS-3762-D: Guideline expansion (new UX-* sections for forms/typography/data display)
5. CAS-3762-E: Static conformance guard script + CI check

---

See it as

The app’s table layer is a kitchen where every cook improvises the mise en place. Most dishes come out fine. But the ones that don’t all have the same failure mode: the plates are too wide for the pass-through window. ResponsiveDataTable is the standard plate size — once it’s the default, the kitchen stops measuring every dish separately.

---

Recap

• Fixed-width + nowrap patterns in settings/admin tables are the dominant conformance gap — 18 surfaces, not one.
• Mobile readiness is Medium-Low overall; settings tabular pages and modal previews are the floor.
• Three remediation waves: standardise the table abstraction (P0), consolidate modal previews + fill guideline stubs (P1), add a static guard script (P2).

---

What changed

• CAS-3762 — Responsive Table Foundation + UI Conformance Audit — the epic this audit serves
• PR #1026 — audit committed