Better Touch Targets on Mobile — v0.1.16
Better Touch Targets on Mobile — v0.1.16
Version: 0.1.16 Reference: MOB-18 Category: Typography & Spacing
Overview
Small action buttons in the Match Review page were difficult to tap accurately on mobile devices. Filter pill buttons and bulk action controls were approximately 30 px tall — below the recommended minimum touch target size — and adjacent buttons had little to no gap between them, increasing the likelihood of accidental taps.
v0.1.16 addresses these issues across two areas of the interface:
What Was Fixed
Filter Pill Buttons (Match Review page)
Filter pills in the Match Review filter bar previously used px-3 py-1.5 text-xs rounded-full, producing a ~30 px tap target.
Changes applied:
- Padding increased to
px-4 py-2— raises the rendered height to a minimum of 36 px. gap-2added between adjacent pills — creates a visible and tappable gap to separate neighbouring controls.
Bulk Action Delete Button (People List)
The bulk action delete button used px-3 py-1.5 text-xs, also rendering at ~30 px.
Changes applied:
- Padding updated to meet the 36 px minimum height target, consistent with other action buttons.
Table Row Icon Buttons
Icon buttons in table rows had minimal separation between adjacent elements.
Changes applied:
- A minimum
gap-1class is now applied between adjacent interactive elements in table rows, reducing the risk of accidental activation of neighbouring controls.
Design Guidance
For compliance teams using the platform on mobile devices (phones or tablets):
- All primary action buttons in the Match Review interface now meet a 36 px minimum touch target height.
- Destructive actions (such as bulk delete) have additional spacing from neighbouring controls to reduce mis-tap risk.
- If you use the Match Review page frequently on mobile, consider grouping or confirming destructive actions before executing — the UI is designed to surface these actions clearly without hiding them.
Affected File
src/app/dashboard/matches/page.tsx