Mobile Fix: FilterDrawer Selects No Longer Auto-Zoom on iOS

Version: 1.0.159
Affects: Transaction Ledger — FilterDrawer
Platform: iOS Safari (all versions)

What Changed

When using the transaction ledger on an iPhone or iPad, tapping any of the filter dropdowns — Type, HMRC Category, Property, or Source — previously caused the entire page to zoom in unexpectedly. This is a well-known iOS Safari behaviour: the browser automatically zooms the viewport whenever a form element with a font-size below 16px receives focus.

The FilterDrawer selects were styled with Tailwind's text-sm class (14px), which is below the 16px threshold, making every tap on a filter a disruptive experience on mobile.

The Fix

All four affected select elements have been updated from:

<!-- Before -->
<select class="text-sm ...">

to:

<!-- After -->
<select class="text-base sm:text-sm ...">

This pattern:

• Renders the select at 16px on mobile — meeting iOS Safari's threshold and preventing auto-zoom.
• Drops back to 14px (text-sm) on sm: breakpoints and above — preserving the intended desktop appearance.

This is the same pattern already used by the BulkRecategoriseBar select, which has always behaved correctly on iOS.

Who Is Affected

Anyone using the transaction ledger's FilterDrawer on an iOS device (iPhone or iPad) in Safari or any iOS WebKit-based browser. No changes to desktop behaviour.

No Action Required

This fix is applied automatically. There are no configuration changes or user actions needed.