fix(ui): tap-targets reach 44px on tour, notification, backups buttons (v1.4.15 H4)

WCAG 2.5.5 Level AAA target-size floor for non-essential controls is
24×24 px and Level AA pointer-target is 24×24 with 24 px gap, but the
mobile-app convention everyone follows is the 44×44 hit-area Apple
HIG / Material recommend. The default `<Button size="sm">` in the
shadcn-base lands at `h-8` (32 px) — readable on desktop, tight on
phones, especially in the most-touched admin/settings/onboarding
surfaces called out in the v1.4.15 design review.

Cross-cutting `button.tsx` `h-9 → h-11` was rejected as too risky
mid-marathon (every UI affected, dozens of layout assumptions). The
targeted alternative bumps the listed call-sites with `min-h-11`
overrides: tour Skip / Back / Next, notification re-enable + send-
test, backups Restore / Download / Run-now / Upload. Admin-only
recent-audit-preview is a `<Link>` not a `<Button>` and is left
alone.

The shadcn `min-h-` Tailwind utility wins over the variant `h-`
because both apply but `min-h-` only floors. So desktop visuals stay
within ~4 px of the previous render while mobile reaches the 44 px
floor.
This commit is contained in:
Marc-André Bombeck committed 2026-05-10 00:29:44 +02:00
1 parent ae13dc0fb2
commit b863e2cc3d
3 files changed
+20 -1

No files matched your search

+5
View File
@@ -87,6 +87,7 @@ function RestoreRowDialog({
aria-label={t("admin.section.backups.restoreAria", {
username: row.username,
})}
className="min-h-11"
>
{pending ? (
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -343,6 +344,7 @@ export function BackupsSection() {
size="sm"
disabled={runBackup.isPending}
onClick={() => runBackup.mutate()}
className="min-h-11"
>
{runBackup.isPending ? (
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -398,6 +400,7 @@ export function BackupsSection() {
variant="outline"
disabled={upload.isPending}
onClick={() => fileInputRef.current?.click()}
className="min-h-11"
>
{upload.isPending ? (
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -438,6 +441,7 @@ export function BackupsSection() {
size="sm"
disabled={runBackup.isPending}
onClick={() => runBackup.mutate()}
className="min-h-11"
>
{runBackup.isPending ? (
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
@@ -496,6 +500,7 @@ export function BackupsSection() {
aria-label={t("admin.section.backups.downloadAria", {
username: row.username,
})}
className="min-h-11"
>
{downloadingId === row.id ? (
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />