9ad1df85d2
Both the residential-clients and residential-interests pages rendered
plain HTML <table>s with 5–6 columns directly. At 390px viewport the
header columns clipped at the right edge — "Sour..." for the clients
page, no header for the interests page either.
Adds a parallel mobile card list:
- <table> stays inside `hidden lg:block` (unchanged at lg+)
- new card list inside `lg:hidden` mirrors the row data:
- Clients: name + status pill on top, then email · phone ·
residence · source as a wrap-friendly meta row.
- Interests: stage label as headline, updated-at on the right,
preferences (line-clamp-2) and notes (line-clamp-1) below,
source small at the bottom.
- Each card is a Link to the detail page (matching the row click
target on desktop).
- Empty + loading states render as a centered card on mobile.
This is the same `hidden lg:block` / `lg:hidden` pattern used for the
main /clients and /interests pages. Doesn't refactor to the full
DataView primitive (would mean rebuilding the residential data layer
on TanStack Table) — keeps the change tightly scoped to the visible
output.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>