Improving Mobile Tap Targets: SearchTrigger in the Header

Release: v1.0.132 · File: src/components/command-palette.tsx

Background

Making Tax Digital compliance requires landlords to interact with the platform regularly — often on mobile devices while away from their desk. Small, hard-to-tap UI elements create friction and increase the chance of mis-taps, which is especially frustrating when navigating quarterly submission deadlines.

This release fixes a touch-target issue with the SearchTrigger button that appears in the application header.

The Problem

The SearchTrigger component inside src/components/command-palette.tsx used a responsive visibility class to hide its label on small screens:

<span className="hidden sm:inline">Search...</span>

On mobile viewports (below the sm breakpoint), this meant:

Only the 14px Search icon was visible — no text label.
The button's padding (px-3 py-1.5) produced a tap target of approximately 28–30px tall.
There was no min-h or min-w constraint on the button element.
The ⌘K keyboard shortcut hint remained visible even though it is meaningless on touch devices.

This fell short of established touch target guidelines:

Guideline	Minimum
Apple Human Interface Guidelines	44 × 44 pt
Google Material Design	48 × 48 dp
WCAG 2.5.5 (AAA)	44 × 44 CSS px

What Was Fixed

1. Minimum height enforced

min-h-9 (36px) has been added to the SearchTrigger button. While 36px is a pragmatic minimum for a compact header, it is a significant improvement over the previous ~28px and ensures the button is reliably tappable alongside other header controls.

2. Search label kept visible on mobile

The label text (Search...) is now visible on mobile. Hiding the label in favour of an icon-only button:

Removes the accessible name of the control for users who are not familiar with the search icon.
Makes the button indistinguishable from other icon buttons without a tooltip.

Keeping the label visible on mobile provides a clear affordance and describes the action.

3. ⌘K shortcut hint hidden on mobile

The keyboard shortcut badge (⌘K) is conditionally hidden on mobile. It is only meaningful to desktop users with a physical keyboard and adds visual noise without benefit on touch devices.

Code Reference

File: src/components/command-palette.tsx

The changes are isolated to the SearchTrigger button element and its child nodes. No other components, API calls, or data flows are affected.

Impact

Area	Before	After
Tap target height	~28–30px	≥36px (`min-h-9`)
Label on mobile	Hidden (icon only)	Visible
`⌘K` hint on mobile	Visible (irrelevant)	Hidden
Desktop behaviour	Unchanged	Unchanged

No Breaking Changes

This is a purely visual and accessibility improvement. There are no changes to:

API endpoints or request/response formats
HMRC Making Tax Digital submission flows
AgentOS API integration or transaction imports
Authentication or National Insurance Number handling
Any data models or business logic