All Docs
FeaturesDepositClearUpdated March 11, 2026

Improving Mobile Touch Targets (MOB-11)

Improving Mobile Touch Targets (MOB-11)

Version: 0.1.163
Category: Touch Interaction

Overview

Mobile usability depends on interactive elements being large enough to tap reliably. Industry accessibility standards — including WCAG 2.5.5, Apple's Human Interface Guidelines, and Google's Material Design — all recommend a minimum touch target size of 44 × 44 px.

Audit MOB-11 identified four elements in the dashboard that fell short of this threshold. Three of those elements are visible on mobile devices and have been updated in this release.

What was fixed

1. KebabMenu trigger

Problem: The trigger used p-1.5 padding around a size-4 (16 px) icon, producing a total tappable area of approximately 32 px — well below the 44 px minimum.

Fix: Padding increased to p-2 as a minimum. For stricter compliance, the button can be wrapped in a min-h-11 min-w-11 flex items-center justify-center container so the visual size of the icon is preserved while the hit area meets the standard.

2. Mobile hamburger button

Problem: The hamburger used p-2 padding around a size-5 (20 px) icon, giving a total height of approximately 36 px.

Fix: Padding increased to p-2.5, bringing the tappable area to approximately 44 × 44 px.

3. Work-queue action buttons

Problem: Action buttons in the work queue used px-2.5 py-1.5, resulting in a height of approximately 32 px — too small for reliable one-handed mobile use.

Fix: Padding updated to px-3 py-2, increasing the button height to 36 px or above. Where the full 44 px height is needed, a min-h-11 wrapper class can be applied.

What was not changed

Rail navigation links

Rail navigation links were noted at h-9 w-9 (36 px) during the audit. Because rail mode is desktop-only and is never rendered on touch devices, no change was required for this element in this release.

Implementation pattern

For any icon-only button that must remain visually compact but still meet the 44 px touch target requirement, use the following wrapper pattern:

<div class="min-h-11 min-w-11 flex items-center justify-center">
  <button class="p-2"><!-- icon --></button>
</div>

This keeps the visual footprint of the icon small while ensuring the tappable region meets accessibility standards.

Affected files

  • src/app/dashboard/work-queue.tsx

Related standards