Tenancy Detail View: Mobile Tab Bar Behaviour

Overview

The tenancy detail view organises information across six tabs: Overview, Check-In, Check-Out, Deductions, Deposit Release, and Compliance. On desktop these tabs display both an icon and a text label. On mobile, text labels are hidden and only icons are shown in order to conserve horizontal space.

Tab Reference

Use the table below to identify each tab by its icon on mobile:

Tab	Icon Description	Purpose
Overview	Overview / home icon	Summary of the tenancy, key dates, and parties
Check-In	Check-in icon	Check-in inspection report and condition evidence
Check-Out	Check-out icon	Check-out inspection report and condition evidence
Deductions	Receipt icon	Proposed deductions, supporting evidence, and dispute status
Deposit Release	Pound (£) sign icon	Deposit breakdown, release amounts, and payment status
Compliance	Compliance / shield icon	Regulatory compliance checklist and document tracking

Scrolling the Tab Bar

Six tabs can be dense on a narrow screen. If not all tabs are immediately visible:

A fade effect on the trailing edge indicates there are more tabs out of view.
Left and right arrow buttons allow you to scroll the tab bar without swiping.

Accessibility

Each icon button carries an aria-label matching its full tab name (e.g. aria-label="Deductions"). Screen readers and other assistive technologies will announce the correct tab name regardless of whether the visual label is displayed.

Known Usability Consideration

Icon-only navigation can slow down first-time users, particularly for domain-specific concepts. If you find the icons ambiguous, refer to the table above. A future release is planned to either:

Add short truncated labels beneath icons (e.g. Ded, Dep, Comp), or
Consolidate to four primary tabs on mobile with a +More overflow for the rest.

See the Changelog for the latest status of this improvement.