Addresses insight cmpifhxfs000lvze9cy6ne0tx (P1 ux_friction, rage click on
/dashboard/vehicles/<id>/categories/<id>).
Before: each row had two competing click targets — a 20px chevron button and a
separate text button — both calling the same expand handler. Row height was
~28px (py-1.5), well below the 44px mobile guideline. No active/press feedback
made it hard to tell whether a tap registered, triggering rage clicks.
After:
- Whole row is a single button (non-leaf) or Link (leaf). One hit area, no
ambiguity about what gets the click.
- min-h-[44px], gap-3, px-3 py-2 — meets mobile guideline with breathing room.
- transition-colors + hover + active:bg-accent/80 give immediate tap feedback.
- focus-visible ring for keyboard nav, aria-expanded for screen readers.
- Chevron becomes a decorative span that rotates 90deg on expand instead of
swapping icons (no extra button), preserving the loading spinner in place.
Phase 2/8 of the UX audit follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Semih Yesilyurt
ae20ca9676