Touch-target audit: 44px minimum on mobile interactive elements (Slice 9)

Apply the mobile-touch-target CSS class to 40 interactive elements across
12 files. The class applies min-height/min-width:44px only below md
(max-width:767px), satisfying WCAG 2.5.5 / Apple HIG on touch devices.
Desktop behavior is unchanged.

Audit log (before -> after hit-area):
- App.tsx: hamburger/dark-mode/sign-out (32/32/28 -> 44)
- Dashboard.tsx: shortcut open/edit/delete (28 -> 44), enabled switch (18 -> 44)
- Media.tsx: mobile pagination prev/next (28 -> 44)
- FileBrowser.impl.tsx: 'Open Settings' alert button (28 -> 44)
- UsersPage.impl.tsx: compose toolbar bold/italic/link/list (32 -> 44),
  attachment remove button (16 -> 44)
- Settings.tsx: machine switch (18 -> 44), clear/add-machine buttons (28 -> 44),
  reset-db checkboxes x3 (16 -> 44)
- Actions.tsx: 'Add action' button (28 -> 44)
- ServicePage.tsx: service enabled switch (18 -> 44)
- ServicesPage.tsx: service switch/open-link/delete-icon (18/28/32 -> 44)
- ObservabilityPage.tsx: retry + 4 asChild link buttons (28 -> 44)
- WidgetConfigDialog.tsx: 4 icon buttons (32 -> 44), 2 switches (18 -> 44),
  2 add-widget buttons (28 -> 44)
- SessionActivityPanel.tsx: 'Open in Users' button (28 -> 44)

Deliberately skipped: default-size text buttons (32px, borderline), desktop-only
sidebar toggle, DataTable internals (desktop-only below md), Select triggers.
Dashboard anchor pills and HoverEditButton already had the class from Slices 1/2.

No new tests (the class applies via @media which jsdom doesn't honor).
116 tests pass; lint/build green.

Refs openspec/changes/mobile-responsive-parity/ (spec R6, tasks slice 9).
This commit is contained in:
Developer
2026-06-26 14:37:40 +00:00
parent 7808822a55
commit 30f1b6e6db
12 changed files with 45 additions and 24 deletions
+9 -5
View File
@@ -891,9 +891,10 @@ export function UsersPage() {
<div className="flex flex-wrap gap-1">
<Tooltip>
<TooltipTrigger asChild>
<UiButton
<UiButton
variant="ghost"
size="icon"
className="mobile-touch-target"
onClick={() => insertMarkup("<strong>", "</strong>")}
aria-label="Bold"
>
@@ -904,9 +905,10 @@ export function UsersPage() {
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<UiButton
<UiButton
variant="ghost"
size="icon"
className="mobile-touch-target"
onClick={() => insertMarkup("<em>", "</em>")}
aria-label="Italic"
>
@@ -917,9 +919,10 @@ export function UsersPage() {
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<UiButton
<UiButton
variant="ghost"
size="icon"
className="mobile-touch-target"
onClick={addLink}
aria-label="Link"
>
@@ -930,9 +933,10 @@ export function UsersPage() {
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<UiButton
<UiButton
variant="ghost"
size="icon"
className="mobile-touch-target"
onClick={() => insertMarkup("<ul><li>", "</li></ul>")}
aria-label="Bullet list"
>
@@ -994,7 +998,7 @@ export function UsersPage() {
type="button"
aria-label={`Remove ${file.name}`}
onClick={() => removeAttachment(index)}
className="inline-flex items-center text-current [&>svg]:size-3"
className="mobile-touch-target inline-flex items-center text-current [&>svg]:size-3"
>
<Trash2 />
</button>