Better Mobile Navigation in the Tenancy Detail View
Better Mobile Navigation in the Tenancy Detail View
Release: v0.1.343 · Category: Responsive / UI/UX
What Changed
The tenancy detail view organises all key information across six tabs:
- Overview
- Check-In
- Check-Out
- Deductions
- Deposit Release
- Compliance
Previously, the icons next to each tab label were hidden on mobile screens using hidden sm:block. Mobile users were left with text-only tabs, relying entirely on the active-tab underline to distinguish which section was selected at a glance.
With six tabs that scroll horizontally on a small screen — and workflows that frequently require switching between, say, Check-Out and Deductions — the absence of icons added unnecessary friction.
The Fix
Starting from v0.1.343, tab icons are shown on mobile and text labels are hidden on mobile to conserve horizontal space. On desktop the layout is unchanged: both icon and label are displayed side by side.
Behaviour by breakpoint
Mobile (< sm) → Icon only (+ active border indicator)
Desktop (≥ sm) → Icon + Label
Accessibility
Hiding the label text visually does not remove it from assistive technology. Each tab element retains its aria-label (or title) attribute set to the full tab name, so screen readers announce "Deductions tab", "Compliance tab", etc. correctly.
Why It Matters
The tenancy detail view is the primary workspace for resolving deposit deductions. Agents and landlords routinely jump between the Check-Out evidence, the Deductions summary, and the Deposit Release steps in a single session. Fast, confident tab recognition — especially on mobile — reduces errors and speeds up resolution.
Technical Detail
The change is isolated to:
src/app/dashboard/tenancies/[id]/tenancy-detail-view.tsx
The CSS class adjustment:
| Element | Before | After |
|---|---|---|
| Icon wrapper | hidden sm:block | (no hide class — visible by default) |
| Label text | (always visible) | hidden sm:inline |
No changes were made to tab behaviour, routing, data fetching, or accessibility tree structure beyond the addition of aria-label / title attributes where absent.