Clearer Tab Labels in the Tenancy Detail View on Mobile

Version: 0.1.295
Affects: Tenancy Detail page — all users on mobile and small-screen devices

Overview

Navigating a tenancy end-to-end involves several distinct stages: checking in, checking out, handling deductions, releasing the deposit, and staying compliant. In the Tenancy Detail view, each of these stages lives under its own tab. On mobile, those tabs previously displayed single-word abbreviations — In, Out, Deduct — that gave users very little to go on, especially on a first visit.

This release replaces those ambiguous short labels with clearer alternatives that communicate meaning at a glance, without breaking the scrollable tab bar layout.

What Was the Problem?

The tab bar in tenancy-detail-view.tsx used a separate set of shortLabels for mobile breakpoints. The intent was to save horizontal space, but the resulting labels were too terse:

In — Is this incoming messages? An intake form? Check-in inspection?
Out — Move-out? Checkout? Log out?
Deduct — Deduct what, from where?

Even Comply — while arguably acceptable — requires users to already know that a compliance checklist exists on this page.

The tab bar already had horizontal scrolling and hidden-scrollbar styling in place, meaning space was not actually the constraint it appeared to be. The abbreviated labels were creating confusion without solving a real layout problem.

What Changed

The shortLabels for mobile have been updated as follows:

Tab	Old Mobile Label	New Mobile Label
Overview	Overview	Overview (unchanged)
Check-In	`In`	`Check-In`
Check-Out	`Out`	`Check-Out`
Deductions	`Deduct`	`Deducts`
Release	`Release`	`Release` (unchanged)
Compliance	`Comply`	`Comply` (unchanged)

The tab bar continues to scroll horizontally on small screens. The scrollbar-hide utility suppresses the visible scrollbar so the UI remains clean. Scroll arrows remain visible for discoverability.

Why Not Icons?

An icon-only approach at the smallest breakpoint (with tooltip-on-long-press) was considered. While icons can work well for well-established conventions (e.g. a settings cog), the tabs in this view map to domain-specific workflows that do not have universally recognised icon metaphors. Text labels — even slightly abbreviated ones — remain more reliable for navigational clarity in a compliance-focused product.

No Breaking Changes

This is a purely presentational update. Tab routing, data loading, and functionality are unaffected. No API changes. No database migrations.

Affected File

src/app/dashboard/tenancies/[id]/tenancy-detail-view.tsx