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:
@@ -232,6 +232,7 @@ function MachineEditor({
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
id="machine-enabled"
|
||||
className="mobile-touch-target"
|
||||
checked={draft.enabled}
|
||||
onCheckedChange={(checked) =>
|
||||
setDraft((current) => ({ ...current, enabled: checked }))
|
||||
@@ -534,7 +535,7 @@ function SSHKeyManager({
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
className="mobile-touch-target w-full"
|
||||
onClick={() => {
|
||||
clear();
|
||||
}}
|
||||
@@ -782,6 +783,7 @@ function ResetLocalDatabaseCard() {
|
||||
<div className="flex flex-col gap-3">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
className="mobile-touch-target"
|
||||
checked={ackSettings}
|
||||
onCheckedChange={(checked) => setAckSettings(Boolean(checked))}
|
||||
/>
|
||||
@@ -789,6 +791,7 @@ function ResetLocalDatabaseCard() {
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
className="mobile-touch-target"
|
||||
checked={ackIndex}
|
||||
onCheckedChange={(checked) => setAckIndex(Boolean(checked))}
|
||||
/>
|
||||
@@ -796,6 +799,7 @@ function ResetLocalDatabaseCard() {
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<Checkbox
|
||||
className="mobile-touch-target"
|
||||
checked={ackIrreversible}
|
||||
onCheckedChange={(checked) =>
|
||||
setAckIrreversible(Boolean(checked))
|
||||
@@ -973,7 +977,7 @@ export function Settings() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
className="mobile-touch-target w-full"
|
||||
onClick={() => {
|
||||
clearSSHValidation();
|
||||
setMachineDraft(emptyMachine("local"));
|
||||
|
||||
Reference in New Issue
Block a user