mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 06:40:50 +00:00
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:
1 parent
ae13dc0fb2
commit
b863e2cc3d
3 files changed
+20
-1
No files matched your search
@@ -256,6 +256,10 @@ function ChannelRow({
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{/* v1.4.15 H4 design: action buttons hit the WCAG 2.5.5 44 px
|
||||
floor on mobile via `min-h-11`. Settings is the most-touched
|
||||
mobile surface; `size="sm"` here clips to ~32 px which Marc
|
||||
flagged as too small on the iPad/iPhone PWA shell. */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{channel.state === "auto_disabled" && (
|
||||
<Button
|
||||
@@ -265,6 +269,7 @@ function ChannelRow({
|
||||
onClick={onReEnable}
|
||||
disabled={reEnablePending}
|
||||
data-testid={`re-enable-${channel.type}`}
|
||||
className="min-h-11"
|
||||
>
|
||||
{reEnablePending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
@@ -281,6 +286,7 @@ function ChannelRow({
|
||||
onClick={onTest}
|
||||
disabled={testPending || channel.state === "auto_disabled"}
|
||||
data-testid={`send-test-${channel.type}`}
|
||||
className="min-h-11"
|
||||
>
|
||||
{testPending ? (
|
||||
<Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
|
||||
|
||||
Reference in new issue
Block a user