Tenant Portal Tab Bar Now Signals Horizontal Scrolling on Mobile
Tenant Portal Tab Bar Now Signals Horizontal Scrolling on Mobile
Version: 0.1.83
Affects: Tenant Portal
Devices: Mobile — particularly narrow viewports such as iPhone SE (375 px wide)
Background
The Tenant Portal gives tenants access to seven key areas of their tenancy through a top tab bar:
| # | Tab |
|---|---|
| 1 | Overview |
| 2 | Check-In |
| 3 | Check-Out |
| 4 | Deductions |
| 5 | Documents |
| 6 | Messages |
| 7 | Dispute |
On a 375 px viewport, only the first three to four tabs fit within the visible area. While the container was already set to overflow-x-auto, there was no visual indicator — no fade, no arrow, no scrollbar — to tell a tenant that additional tabs existed to the right.
This is a critical usability gap. The tabs most important to tenants navigating a deposit dispute — Deductions, Documents, and Dispute — are precisely the ones most likely to be hidden.
What Was Fixed
Right-Edge Fade Gradient
A fade gradient overlay (bg-gradient-to-l from-white/80 to-transparent) is now rendered at the right edge of the tab bar. This is a widely-recognised mobile UI pattern that passively communicates "scroll to reveal more" without requiring any user action or instructional text.
The gradient is a pseudo-element that does not interfere with tap targets.
Momentum Scrolling on iOS
-webkit-overflow-scrolling: touch is applied to the tab bar scroll container. This enables iOS Safari's native inertial scrolling, making the swipe gesture feel native rather than sticky or abrupt.
Hidden Scrollbar
A scrollbar-hide utility class suppresses the visible scrollbar track on Android Chrome and desktop browsers when the tab bar is rendered at a narrow width. This keeps the fade gradient as the sole and unambiguous scroll affordance, avoiding a cluttered dual-indicator UI.
User Impact
- Before: On iPhone SE and similar devices, tabs 5–7 (Documents, Messages, Dispute) were silently off-screen with no hint they existed. Tenants had no reason to swipe.
- After: The fade gradient at the right edge is always visible when overflow is present, clearly signalling that the tab row is scrollable. Swiping feels fluid on both iOS and Android.
Technical Reference
Changed file: src/app/tenant-portal/[token]/portal-client.tsx
Key changes applied:
// Tab bar scroll container
<div
className="flex overflow-x-auto scrollbar-hide -webkit-overflow-scrolling-touch relative"
>
{/* ...tab items... */}
{/* Right-edge scroll affordance */}
<div
className="pointer-events-none sticky right-0 h-full w-12 bg-gradient-to-l from-white/80 to-transparent"
aria-hidden="true"
/>
</div>
Note: The exact implementation may differ slightly from the snippet above; refer to the source file for the canonical version.
Considered Alternatives
The following approaches were evaluated but deferred in favour of the lighter-weight gradient solution:
| Approach | Status | Notes |
|---|---|---|
| Fade gradient overlay | ✅ Shipped | Minimal change, strong visual signal, no structural refactor |
More overflow menu (tabs 5+) | 🔜 Deferred | Reduces visible tabs but hides navigation behind an extra tap |
| Bottom navigation bar (mobile) | 🔜 Deferred | Better ergonomics for thumb reach; higher implementation cost |
The gradient approach was chosen as the lowest-risk, highest-impact change for this release. The overflow menu and bottom nav patterns remain candidates for a future responsive redesign of the portal navigation.
No Breaking Changes
This change is confined to the visual and interaction layer. No API endpoints, authentication flows, data models, or server components were modified.