From 499cfad107e2b7964f27cdef29fa2c3965304349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 17:44:58 +0200
Subject: [PATCH] fix(a11y): bump /admin/users + /admin/login-overview tap
 targets to WCAG 2.5.5
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The four per-row action buttons on `/admin/users` (role toggle, edit,
reset password, force-logout) and the filter pills on both routes
were sized `h-7` (28px) — well below WCAG 2.5.5 AA's 44×44px target
that the rest of the app already honours (bottom-nav, dashboard
quick-add). Mobile users on a 360px viewport had four 28×28px buttons
crammed into the right edge of every user row.

Adds `min-h-11 min-w-11` to all six button sites. The visual icon-only
look is preserved — only the hit-area expands.

Closes H2 from .planning/phase-6-design-findings.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/admin/login-overview-section.tsx  |  4 ++--
 src/components/admin/user-management-section.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/admin/login-overview-section.tsx b/src/components/admin/login-overview-section.tsx
index 086b95ba9..46b341c10 100644
--- a/src/components/admin/login-overview-section.tsx
+++ b/src/components/admin/login-overview-section.tsx
@@ -74,7 +74,7 @@ export function LoginOverviewSection() {
             <Button
               variant={filter === "all" ? "default" : "ghost"}
               size="sm"
-              className="h-7 px-2 text-xs"
+              className="min-h-11 min-w-11 px-3 text-xs"
               onClick={() => setFilter("all")}
             >
               {t("admin.allAuthEvents")}
@@ -82,7 +82,7 @@ export function LoginOverviewSection() {
             <Button
               variant={filter === "failed" ? "default" : "ghost"}
               size="sm"
-              className="h-7 px-2 text-xs"
+              className="min-h-11 min-w-11 px-3 text-xs"
               onClick={() => setFilter("failed")}
             >
               {t("admin.failedOnly")}
diff --git a/src/components/admin/user-management-section.tsx b/src/components/admin/user-management-section.tsx
index aefb87404..d479c2b3e 100644
--- a/src/components/admin/user-management-section.tsx
+++ b/src/components/admin/user-management-section.tsx
@@ -179,7 +179,7 @@ export function UserManagementSection() {
               key={value}
               variant={filter === value ? "default" : "ghost"}
               size="sm"
-              className="h-7 px-2 text-xs"
+              className="min-h-11 min-w-11 px-3 text-xs"
               onClick={() => setFilter(value)}
               aria-pressed={filter === value}
             >
@@ -238,7 +238,7 @@ export function UserManagementSection() {
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-7 px-2 text-xs"
+                        className="min-h-11 min-w-11 px-3 text-xs"
                         onClick={() =>
                           updateUser.mutate({
                             id: u.id,
@@ -264,7 +264,7 @@ export function UserManagementSection() {
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-7 px-2 text-xs"
+                        className="min-h-11 min-w-11 px-2 text-xs"
                         onClick={() => startEdit(u)}
                         title={t("admin.editUser")}
                         aria-label={t("admin.editUser")}
@@ -274,7 +274,7 @@ export function UserManagementSection() {
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-7 px-2 text-xs"
+                        className="min-h-11 min-w-11 px-2 text-xs"
                         onClick={() => startReset(u)}
                         title={t("admin.resetPassword")}
                         aria-label={t("admin.resetPassword")}
@@ -284,7 +284,7 @@ export function UserManagementSection() {
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="text-destructive hover:text-destructive h-7 px-2 text-xs"
+                        className="text-destructive hover:text-destructive min-h-11 min-w-11 px-2 text-xs"
                         onClick={() => setLogoutTarget(u)}
                         disabled={u.id === currentUserId}
                         title={