Fixing Scroll Fatigue in the Check-Out Report Builder
Fixing Scroll Fatigue in the Check-Out Report Builder
Version: 0.1.122
Category: UI/UX · Usability
The Problem
The Check-Out Report Builder is the most-used screen in a letting agent's daily workflow. It is where agents work through every room in a property, assessing condition, logging evidence, and recording deductions before the deposit dispute window opens.
Right now, the builder has a fundamental navigation problem: all rooms are rendered sequentially on a single scrollable page, with no way to jump between them.
For a property with 3 rooms this is manageable. For a typical mid-sized rental — kitchen, 3 bedrooms, 2 bathrooms, hallway, living room, garden, and outbuildings — an agent is looking at 10 or more room sections stacked vertically. Each room has its own collapse toggle, but there is no overview, no index, and no shortcut. Getting from the kitchen assessment back to bedroom 2 means scrolling the entire page.
This is scrolling fatigue at scale, repeated across every check-out report an agent processes.
What Is Being Built
The fix introduces a Room Navigator — a persistent, context-aware navigation component built directly into the report builder.
Room Navigator (Desktop)
When a report contains more than 3 rooms, a sticky navigator appears as either a sidebar or a horizontal pill-strip above the rooms list. Each pill represents one room and displays:
- Room name — e.g. Kitchen, Bedroom 1, Garden
- Unrated item count — how many items in that room have not yet been assessed
- Deteriorated item count — how many items have been flagged as deteriorated
Clicking any room pill smooth-scrolls the page to that room's section using a React ref anchor. Agents can jump anywhere in the report instantly.
Room Navigator (Mobile)
On small screens, the full pill-strip is collapsed into a single floating "Jump to room" button. Tapping it opens a bottom sheet listing all rooms with the same completion-status indicators. Selecting a room dismisses the sheet and scrolls to the section.
Trigger Threshold
The navigator is only shown when a report has more than 3 rooms. Shorter reports render as before — no unnecessary chrome for simple properties.
Why This Matters
The Check-Out Report Builder is the platform's core productivity surface. An agent completing 5 check-outs in a day interacts with this screen for hours. Navigation friction — even friction as simple as scrolling — compounds across every report and every property.
The Room Navigator transforms the builder from a scroll marathon into a structured, navigable workspace. Completion-status indicators on each pill mean agents can see at a glance which rooms still need attention without hunting through the page, reducing errors and missed assessments.
Affected Component
| File | Change |
|---|---|
src/app/dashboard/check-out/[reportId]/report-builder.tsx | Add sticky Room Navigator with pill-strip (desktop) and bottom-sheet (mobile), conditional on report room count > 3 |