Fixing Cramped Banner Buttons on Mobile (MOB-18)
Fixing Cramped Banner Buttons on Mobile (MOB-18)
Version: 0.1.218
Area: Work Queue — Mobile UX
Category: Typography & Spacing
Background
The work queue is one of the most frequently used surfaces in the product on mobile. It displays a live list of tasks for landlords, agents, and tenants — and often shows stacked banner components (e.g. SnoozedBanner, ActionedBanner) with inline action buttons.
When multiple banners appear adjacent to one another, their action buttons (Unsnooze, Undo) were difficult to tap accurately because:
- The buttons were too small (~26px height with
px-1.5 py-0.5) - Adjacent interactive elements left insufficient space between tap targets
This led to accidental taps on neighbouring elements and a generally frustrating mobile experience.
What Was Fixed
Both the SnoozedBanner and ActionedBanner dismiss/action buttons in src/app/dashboard/work-queue.tsx have been updated to use a minimum height of 44px, achieved with the min-h-11 Tailwind utility.
Button sizing — before vs. after
| Button | Before | Approx. Height | After | Approx. Height |
|---|---|---|---|---|
SnoozedBanner — Unsnooze | px-1.5 py-0.5 | ~26px | min-h-11 px-2 | ~44px |
ActionedBanner — Undo | px-1.5 py-0.5 | ~26px | min-h-11 px-2 | ~44px |
Updated className
Both buttons now share the following class string:
ml-3 flex shrink-0 min-h-11 items-center gap-1 rounded px-2 hover:bg-muted/60 hover:text-foreground transition-colors
Why This Matters
Mobile accessibility guidelines (including Apple's HIG and Google's Material Design) recommend a minimum tap-target size of 44×44px. Buttons below this threshold increase mis-tap rates, particularly in list-dense UIs like a work queue where banners may stack vertically.
By reaching min-h-11 (44px in Tailwind's default scale), these buttons now meet full compliance without impacting the visual layout of the banner.
No Breaking Changes
This is a presentational-only change. No props, APIs, or behaviour were modified. Existing consumers of SnoozedBanner and ActionedBanner will see slightly taller action buttons with no other differences.