alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+3 -3
View File
@@ -194,7 +194,7 @@ function MobileDrawer() {
return ( return (
<Sheet open={open} onOpenChange={setOpen}> <Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button variant="ghost" size="icon" className="md:hidden"> <Button variant="ghost" size="icon" className="mobile-touch-target md:hidden">
<Menu className="h-5 w-5" /> <Menu className="h-5 w-5" />
</Button> </Button>
</SheetTrigger> </SheetTrigger>
@@ -281,7 +281,7 @@ function TopBar({
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={onToggleDarkMode} onClick={onToggleDarkMode}
className="h-8 w-8" className="mobile-touch-target h-8 w-8"
> >
{darkMode ? ( {darkMode ? (
<Sun className="h-4 w-4" /> <Sun className="h-4 w-4" />
@@ -294,7 +294,7 @@ function TopBar({
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={onSignOut} onClick={onSignOut}
className="gap-2" className="mobile-touch-target gap-2"
> >
<LogOut className="h-4 w-4" /> <LogOut className="h-4 w-4" />
<span className="hidden sm:inline">Logout</span> <span className="hidden sm:inline">Logout</span>
frontend/src/components/ObservabilityPage.tsx
+5 -5
View File
@@ -141,7 +141,7 @@ function QueryError({
<AlertTitle>{label} failed</AlertTitle> <AlertTitle>{label} failed</AlertTitle>
<AlertDescription className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <AlertDescription className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<span className="break-words">{error.message}</span> <span className="break-words">{error.message}</span>
<Button variant="outline" size="sm" onClick={() => refetch()}> <Button variant="outline" size="sm" className="mobile-touch-target" onClick={() => refetch()}>
<RefreshCw className="mr-1 h-3 w-3" /> <RefreshCw className="mr-1 h-3 w-3" />
Retry Retry
</Button> </Button>
@@ -255,7 +255,7 @@ function GrafanaLinkCard({
<div className="font-medium">{title}</div> <div className="font-medium">{title}</div>
<div className="text-sm text-muted-foreground">{description}</div> <div className="text-sm text-muted-foreground">{description}</div>
</div> </div>
<Button variant="outline" size="sm" asChild> <Button variant="outline" size="sm" className="mobile-touch-target" asChild>
<a <a
href={href} href={href}
target="_blank" target="_blank"
@@ -585,7 +585,7 @@ export function ObservabilityPage() {
title="No Node Exporter targets" title="No Node Exporter targets"
description="Enable Node Exporter on an SSH machine in Settings to populate Prometheus scrape targets." description="Enable Node Exporter on an SSH machine in Settings to populate Prometheus scrape targets."
action={ action={
<Button variant="outline" size="sm" asChild> <Button variant="outline" size="sm" className="mobile-touch-target" asChild>
<Link to="/settings">Open Settings</Link> <Link to="/settings">Open Settings</Link>
</Button> </Button>
} }
@@ -641,7 +641,7 @@ export function ObservabilityPage() {
title="No Grafana service configured" title="No Grafana service configured"
description="Add a Grafana service instance to enable deep-links to dashboards and logs." description="Add a Grafana service instance to enable deep-links to dashboards and logs."
action={ action={
<Button variant="outline" size="sm" asChild> <Button variant="outline" size="sm" className="mobile-touch-target" asChild>
<Link to="/services">Open Services</Link> <Link to="/services">Open Services</Link>
</Button> </Button>
} }
@@ -653,7 +653,7 @@ export function ObservabilityPage() {
title="No machine selected" title="No machine selected"
description="Add monitoring machines in Settings to see Grafana drill-down links." description="Add monitoring machines in Settings to see Grafana drill-down links."
action={ action={
<Button variant="outline" size="sm" asChild> <Button variant="outline" size="sm" className="mobile-touch-target" asChild>
<Link to="/settings">Open Settings</Link> <Link to="/settings">Open Settings</Link>
</Button> </Button>
} }
frontend/src/components/SessionActivityPanel.tsx
+1
View File
@@ -168,6 +168,7 @@ export function SessionActivityPanel({
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="mobile-touch-target"
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
onSelectSession(session); onSelectSession(session);
frontend/src/components/WidgetConfigDialog.tsx
+9 -5
View File
@@ -315,6 +315,7 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch <Switch
id="widget-enabled" id="widget-enabled"
className="mobile-touch-target"
checked={draft.enabled} checked={draft.enabled}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
setDraft({ ...draft, enabled: checked }) setDraft({ ...draft, enabled: checked })
@@ -377,7 +378,7 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8" className="mobile-touch-target h-8 w-8"
disabled={index === 0} disabled={index === 0}
onClick={() => moveInstance(index, -1)} onClick={() => moveInstance(index, -1)}
> >
@@ -386,21 +387,22 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8" className="mobile-touch-target h-8 w-8"
disabled={index === sortedInstances.length - 1} disabled={index === sortedInstances.length - 1}
onClick={() => moveInstance(index, 1)} onClick={() => moveInstance(index, 1)}
> >
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</Button> </Button>
<Switch <Switch
checked={instance.enabled} className="mobile-touch-target"
checked={instance.enabled}
onCheckedChange={() => toggleEnabled(instance)} onCheckedChange={() => toggleEnabled(instance)}
aria-label={`Toggle ${instance.title}`} aria-label={`Toggle ${instance.title}`}
/> />
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8" className="mobile-touch-target h-8 w-8"
onClick={() => startEdit(instance)} onClick={() => startEdit(instance)}
> >
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
@@ -408,7 +410,7 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8 text-destructive" className="mobile-touch-target h-8 w-8 text-destructive"
onClick={() => removeInstance(instance)} onClick={() => removeInstance(instance)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
@@ -428,6 +430,7 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
key={b.kind} key={b.kind}
variant="outline" variant="outline"
size="sm" size="sm"
className="mobile-touch-target"
onClick={() => startAddBuiltIn(b.kind)} onClick={() => startAddBuiltIn(b.kind)}
> >
<Plus className="mr-1 h-3 w-3" /> <Plus className="mr-1 h-3 w-3" />
@@ -442,6 +445,7 @@ export function WidgetConfigDialog({ open, onClose }: Props) {
key={`${s.id}:${w.kind}`} key={`${s.id}:${w.kind}`}
variant="outline" variant="outline"
size="sm" size="sm"
className="mobile-touch-target"
onClick={() => startAddService(s.id, w.kind)} onClick={() => startAddService(s.id, w.kind)}
> >
<Plus className="mr-1 h-3 w-3" /> <Plus className="mr-1 h-3 w-3" />
frontend/src/pages/Actions.tsx
+1 -1
View File
@@ -367,7 +367,7 @@ export function Actions() {
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full" className="mobile-touch-target w-full"
onClick={createNew} onClick={createNew}
> >
Add action Add action
frontend/src/pages/Dashboard.tsx
+4 -2
View File
@@ -354,6 +354,7 @@ function ShortcutDialog({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch <Switch
id="shortcut-enabled" id="shortcut-enabled"
className="mobile-touch-target"
checked={draft.enabled} checked={draft.enabled}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
onChange({ ...draft, enabled: checked }) onChange({ ...draft, enabled: checked })
@@ -424,13 +425,14 @@ function ShortcutCard({
size="sm" size="sm"
disabled={!shortcut.enabled || !href} disabled={!shortcut.enabled || !href}
onClick={onOpen} onClick={onOpen}
className="mobile-touch-target"
> >
Open Open
</Button> </Button>
<Button size="sm" variant="outline" onClick={onEdit}> <Button size="sm" variant="outline" onClick={onEdit} className="mobile-touch-target">
Edit Edit
</Button> </Button>
<Button size="sm" variant="destructive" onClick={onDelete}> <Button size="sm" variant="destructive" onClick={onDelete} className="mobile-touch-target">
Delete Delete
</Button> </Button>
</div> </div>
frontend/src/pages/FileBrowser.impl.tsx
+1
View File
@@ -879,6 +879,7 @@ export function FileBrowser() {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => navigateToSettings("/settings")} onClick={() => navigateToSettings("/settings")}
className="mobile-touch-target"
> >
Open Settings Open Settings
</Button> </Button>
frontend/src/pages/Media.tsx
+2
View File
@@ -167,6 +167,7 @@ function MediaMobilePagination({
} }
disabled={pageIndex <= 0} disabled={pageIndex <= 0}
aria-label="Previous page" aria-label="Previous page"
className="mobile-touch-target"
> >
Previous Previous
</Button> </Button>
@@ -180,6 +181,7 @@ function MediaMobilePagination({
})) }))
} }
disabled={pageIndex >= pageCount - 1} disabled={pageIndex >= pageCount - 1}
className="mobile-touch-target"
aria-label="Next page" aria-label="Next page"
> >
Next Next
frontend/src/pages/ServicePage.tsx
+1
View File
@@ -238,6 +238,7 @@ export function ServicePage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch <Switch
id="service-enabled" id="service-enabled"
className="mobile-touch-target"
checked={enabled} checked={enabled}
onCheckedChange={setEnabled} onCheckedChange={setEnabled}
/> />
frontend/src/pages/ServicesPage.tsx
+3 -1
View File
@@ -234,6 +234,7 @@ function CreateServiceDialog({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch <Switch
id="service-enabled" id="service-enabled"
className="mobile-touch-target"
checked={draft.enabled} checked={draft.enabled}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
setDraft({ ...draft, enabled: checked }) setDraft({ ...draft, enabled: checked })
@@ -328,6 +329,7 @@ export function ServicesPage() {
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="mobile-touch-target"
onClick={() => onClick={() =>
navigate(`/services/${s.service_type}/${s.id}`) navigate(`/services/${s.service_type}/${s.id}`)
} }
@@ -337,7 +339,7 @@ export function ServicesPage() {
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8 text-destructive" className="mobile-touch-target h-8 w-8 text-destructive"
onClick={() => setDeleteId(s.id)} onClick={() => setDeleteId(s.id)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
frontend/src/pages/Settings.tsx
+6 -2
View File
@@ -232,6 +232,7 @@ function MachineEditor({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch <Switch
id="machine-enabled" id="machine-enabled"
className="mobile-touch-target"
checked={draft.enabled} checked={draft.enabled}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
setDraft((current) => ({ ...current, enabled: checked })) setDraft((current) => ({ ...current, enabled: checked }))
@@ -534,7 +535,7 @@ function SSHKeyManager({
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full" className="mobile-touch-target w-full"
onClick={() => { onClick={() => {
clear(); clear();
}} }}
@@ -782,6 +783,7 @@ function ResetLocalDatabaseCard() {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<Checkbox <Checkbox
className="mobile-touch-target"
checked={ackSettings} checked={ackSettings}
onCheckedChange={(checked) => setAckSettings(Boolean(checked))} onCheckedChange={(checked) => setAckSettings(Boolean(checked))}
/> />
@@ -789,6 +791,7 @@ function ResetLocalDatabaseCard() {
</label> </label>
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<Checkbox <Checkbox
className="mobile-touch-target"
checked={ackIndex} checked={ackIndex}
onCheckedChange={(checked) => setAckIndex(Boolean(checked))} onCheckedChange={(checked) => setAckIndex(Boolean(checked))}
/> />
@@ -796,6 +799,7 @@ function ResetLocalDatabaseCard() {
</label> </label>
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<Checkbox <Checkbox
className="mobile-touch-target"
checked={ackIrreversible} checked={ackIrreversible}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
setAckIrreversible(Boolean(checked)) setAckIrreversible(Boolean(checked))
@@ -973,7 +977,7 @@ export function Settings() {
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full" className="mobile-touch-target w-full"
onClick={() => { onClick={() => {
clearSSHValidation(); clearSSHValidation();
setMachineDraft(emptyMachine("local")); setMachineDraft(emptyMachine("local"));
frontend/src/pages/UsersPage.impl.tsx
+9 -5
View File
@@ -891,9 +891,10 @@ export function UsersPage() {
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<UiButton <UiButton
variant="ghost" variant="ghost"
size="icon" size="icon"
className="mobile-touch-target"
onClick={() => insertMarkup("<strong>", "</strong>")} onClick={() => insertMarkup("<strong>", "</strong>")}
aria-label="Bold" aria-label="Bold"
> >
@@ -904,9 +905,10 @@ export function UsersPage() {
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<UiButton <UiButton
variant="ghost" variant="ghost"
size="icon" size="icon"
className="mobile-touch-target"
onClick={() => insertMarkup("<em>", "</em>")} onClick={() => insertMarkup("<em>", "</em>")}
aria-label="Italic" aria-label="Italic"
> >
@@ -917,9 +919,10 @@ export function UsersPage() {
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<UiButton <UiButton
variant="ghost" variant="ghost"
size="icon" size="icon"
className="mobile-touch-target"
onClick={addLink} onClick={addLink}
aria-label="Link" aria-label="Link"
> >
@@ -930,9 +933,10 @@ export function UsersPage() {
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<UiButton <UiButton
variant="ghost" variant="ghost"
size="icon" size="icon"
className="mobile-touch-target"
onClick={() => insertMarkup("<ul><li>", "</li></ul>")} onClick={() => insertMarkup("<ul><li>", "</li></ul>")}
aria-label="Bullet list" aria-label="Bullet list"
> >
@@ -994,7 +998,7 @@ export function UsersPage() {
type="button" type="button"
aria-label={`Remove ${file.name}`} aria-label={`Remove ${file.name}`}
onClick={() => removeAttachment(index)} 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 /> <Trash2 />
</button> </button>