One Tap to Fix — Compliance Dashboard Mobile UX Improvements (v0.1.301)

Compliance problems don't wait until you're at a desk. With more landlords and agents checking their portfolio on the go, the Compliance Dashboard needs to work just as smoothly on a phone as it does on a wide monitor. v0.1.301 addresses a gap that made mobile users navigate manually from a flagged issue all the way to the remediation screen — often three or more taps with no visual guide.

The Problem

The Compliance Dashboard is built on a lg:grid-cols-5 split layout: the portfolio table takes up three columns and the issues panel takes two. On desktop, this provides a clear, side-by-side working environment.

On mobile, the table collapses into a card-based view — which is the right call for narrow screens — but two specific gaps made the experience frustrating:

1. IssueCard (expanded state): Showed a "Learn more" button but no way to jump directly to the tenancy where the issue lives. A user who wanted to act had to close the card, find the tenancy manually, and navigate to its compliance tab.

2. PortfolioCard: Showed a "Re-check" button but gave no indication of how many open issues existed for that tenancy, and no shortcut to view them.

In short: the dashboard was good at surfacing compliance problems but poor at routing users to fix them.

What's New

"Fix now →" on IssueCard

Each IssueCard, when expanded, now includes a "Fix now →" button. Tapping it takes you directly to:

/dashboard/tenancies/{tenancyId}?tab=compliance

The tenancy ID is resolved from the card's own data, so there is no ambiguity about which tenancy is affected. The compliance tab opens immediately — no extra navigation required.

"View {N} issues" on PortfolioCard

Each PortfolioCard now displays a secondary "View {N} issues" link sitting alongside the existing "Re-check" button. The count N reflects the number of currently open compliance issues for that tenancy, giving you an at-a-glance severity indicator and a one-tap path to investigate.

Why This Matters

Fairness and compliance depend on speed of action as much as awareness of a problem. A landlord or agent who can see an issue but cannot quickly act on it is almost as poorly served as one who never sees it at all. These two small additions close the loop: identify → fix in one tap, regardless of screen size.

Technical Notes

• Changes are confined to src/app/dashboard/compliance/compliance-dashboard.tsx.
• No API changes, no data model changes, no breaking changes.
• The ?tab=compliance query parameter is already supported by the tenancy detail page routing.

---

Released in v0.1.301. Category: UI/UX · Layout.