Repository navigation
mobile: touch targets below 44pt on .btn-small, .toggle-password, .modal-confirm-close #983
Description
Summary
.btn-small (padding: 0.25rem 0.5rem, ~28px tall) is used in every table action column. .toggle-password and .modal-confirm-close have ~24px tap areas. All three fall below the 44x44pt iOS HIG / WCAG 2.5.5 minimum.
Repro
iOS Safari or Chrome Android, 375x812 viewport. Open Recommendations or History; attempt to tap Approve/Cancel/Retry. Miss-taps on adjacent cells.
Where in code
frontend/src/styles/components.css-.btn-small,.modal-confirm-closefrontend/src/styles/forms.css-.toggle-password
Proposed fix
Add min-height: 44px to .btn-small; increase padding on .toggle-password and .modal-confirm-close or use a transparent ::after tap-target extender that preserves the visual size on desktop.
Out of scope
Full button hierarchy redesign; desktop visual appearance.
Activity
cristim commentedon Jul 22, 2026
Fixed by PR #989 (2026-06-08); regression test added in PR #1499. Closing.
cristim commentedon Jul 22, 2026
Verified as already fixed:
@media (pointer: coarse) { .btn, button, [role="button"], input[type=submit/button/reset], select, checkbox, radio { min-height: 44px; min-width: 44px; } }infrontend/src/styles/responsive.css..btn-small,.toggle-password,.modal-confirm-close): all three render as literal<button>elements in the markup, so the genericbuttonselector in feat(frontend/mobile): viewport + touch-target + safe-area foundations #989 already gives them a 44×44 minimum on touch devices. AST-parsed all 11 style files and verified no rule sets a competingmin-height/min-width/height/widthon any of them.frontend/src/__tests__/css.test.tsasserting the three selectors fall under thepointer: coarse44px rule, so a future refactor ofresponsive.csscan't silently regress this.Closing as superseded by #989 (fix) + #1499 (regression test).
fix(frontend/mobile): drop cross-PR collision from touch-target test (#…
test(frontend/mobile): regression coverage for #989 44x44 touch minim…