All Docs
FeaturesMaking Tax DigitalUpdated February 27, 2026

Mobile Fix: Transaction Ledger FilterDrawer Close Button Now Meets 44px Touch Target Standard

Mobile Fix: Transaction Ledger FilterDrawer Close Button Now Meets 44px Touch Target Standard

Release: v1.0.259
Affected screen: Dashboard → Transactions → Transaction Ledger (FilterDrawer)
Platform: Mobile

Background

When filtering transactions on mobile, tapping the × close button in the FilterDrawer header could be frustratingly imprecise. The root cause was a padding value (p-1.5) that produced an effective tap area of only around 28 × 28 px — roughly half the minimum size required for reliable mobile interaction.

What Was Fixed

The close button in src/app/dashboard/transactions/transaction-ledger.tsx has been updated to guarantee a minimum 44 × 44 px touch target on all mobile devices.

Before

// Effective touch area: ~28 × 28 px ❌
<button
  className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
>
  <XIcon className="h-4 w-4" />
</button>

After

// Effective touch area: ≥44 × 44 px ✅
<button
  className="rounded-lg p-2.5 min-h-11 min-w-11 flex items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
>
  <XIcon className="h-4 w-4" />
</button>

How the Fix Works

Tailwind classPurpose
p-2.5Increases padding from 6 px to 10 px per side
min-h-11Enforces a minimum height of 44 px (2.75 rem)
min-w-11Enforces a minimum width of 44 px (2.75 rem)
flex items-center justify-centerKeeps the × icon visually centred inside the larger hit area

The visual appearance of the button changes minimally — the icon remains the same size and position. Only the invisible interactive area grows to meet the standard.

Why 44px?

The 44 × 44 px minimum is the widely adopted standard for mobile touch targets:

  • Apple HIG recommends a minimum tappable area of 44 × 44 pt.
  • Google Material Design recommends 48 × 48 dp minimum, with 44 dp as an acceptable floor.
  • WCAG 2.5.5 (Level AAA) specifies at least 44 × 44 CSS pixels for pointer targets.

Missing this threshold leads to mis-taps, user frustration, and accessibility failures — particularly for users with motor impairments or those using their phones one-handed.

No Breaking Changes

This is a style-only change. No props, data structures, API calls, or filter logic were modified. Existing behaviour is fully preserved.