Why We Fixed the Hidden Buttons in the Deduction Claim Builder

Release v0.1.114 · Accessibility · Deduction Claim Builder

A small CSS class caused a significant usability failure. Here's what happened, why it matters, and what we did about it.

The problem, in plain terms

When a landlord or agent builds a deduction claim, they work through a list of DeductionLine items — one for each charge (cleaning, damage, rent arrears, and so on). Each line has two action buttons: Edit and Delete.

Until v0.1.114, those buttons were invisible by default. They only appeared when you hovered your mouse cursor over the row.

On a laptop with a trackpad or mouse, that's a familiar enough pattern — you hover, the buttons appear, you click. Slightly hidden, but workable.

On a phone or tablet? The buttons never appeared at all.

Touch screens don't have a hover state. There's no cursor sitting over the row waiting to trigger the reveal. You tap, you get a tap — not a hover. In practical terms, this meant that anyone using the claim builder on a mobile device could add deduction lines but could not edit or delete them. The Delete button, in particular, had no other route — there was no way around it.

The evidence gap

While investigating the hover issue, a second problem became clear: the data model for each deduction line already has an evidenceKeys field — a place to store references to attached photos, invoices, and receipts. But there was no UI for it. The capability existed in the backend; it just wasn't reachable from the claim builder screen.

For a platform built around fair, evidence-backed deposit deductions, that's a meaningful gap. A claim with no attached evidence is harder to stand behind in a dispute.

What we're fixing

Both problems have the same solution: replace the hover-reveal pattern with a persistent kebab menu (⋮) on every deduction line.

The kebab menu is always visible — no hovering required. It works the same way on a phone as it does on a desktop. And it's not a new pattern: the WorkQueue feature already uses an identical KebabMenu component, so this brings the claim builder into line with the rest of the dashboard.

The menu exposes three options:

Edit — opens the existing edit flow for the deduction line
Delete — removes the line from the claim
Attach evidence — opens an inline file upload drawer where photos, invoices, and other supporting documents can be attached directly to the line item, stored against the evidenceKeys field

No new infrastructure needed. The file-upload component already exists; it just needed to be wired in.

Why this matters

Fair deposit deductions depend on two things: clear itemisation and strong evidence. The claim builder is the primary tool for both. Locking critical actions behind a hover state — and hiding the evidence attachment capability entirely — undermined both.

This fix makes the claim builder fully usable on any device, and surfaces the evidence workflow where it's needed most: right next to the line item it supports.

Released in v0.1.114. Affects src/app/dashboard/deductions/[tenancyId]/deduction-claim-builder.tsx.