fix: apply the 44px button target only to coarse pointers
Gitea Actions Runner Test / test-job (push) Successful in 2s
CI / check (push) Successful in 27s
CI / tests-integration (push) Successful in 1m35s
CI / tests-unit (push) Successful in 1m38s
CI / tests-ui (push) Successful in 2m20s
CI / preflight (push) Skipped
CI / deploy (push) Failing after 2m55s

The UI screenshot suite caught a regression from the previous commit: the admin
article form grew 3px and its baseline no longer matched.

The cause was the blanket `.btn` min-height bump from 40px to 44px. That was
the wrong way round — 40px already clears WCAG 2.2 AA, which asks for 24px, and
44px is a touch-target guideline. Growing every button for mouse users only made
each admin dialog and table 4px taller for no benefit.

The 44px floor now sits behind `@media (pointer: coarse)`, so finger input gets
the comfortable target and desktop keeps its density. A hybrid laptop still
uses the desktop metrics for its trackpad, which is the behaviour the previous
attempt got wrong in both directions.
This commit is contained in:
openhands committed 2026-10-09 18:04:21 +02:00
1 parent 5cb42c8dfb
commit 6b34293cd3
1 file changed
+15 -4
+15 -4
View File
@@ -1023,10 +1023,12 @@ a:hover {
font-weight: 700;
font-size: 14px;
cursor: pointer;
/* 44px: the comfortable touch-target size (WCAG 2.1 AAA 2.5.5 / Apple HIG).
WCAG 2.2 AA only asks for 24px, so this is a comfort floor rather than a
compliance fix, but every button in the system shares this class. */
min-height: 44px;
/* Desktop density: 40px. WCAG 2.2 AA only asks for 24px, so this is already
comfortable for a mouse. The 44px touch-target size (WCAG 2.1 AAA 2.5.5 /
Apple HIG) is applied below only for coarse pointers — growing every
button on desktop pushed each admin dialog and table 4px taller for no
benefit to mouse users. */
min-height: 40px;
transition: all 0.18s ease;
background: color-mix(
in srgb,
@@ -1036,6 +1038,15 @@ a:hover {
color: var(--color-text-readable, var(--color-text));
text-decoration: none;
}
/* Touch devices get the comfortable target size; desktop keeps the denser
layout. `pointer: coarse` matches finger input, so a hybrid laptop still uses
the 40px desktop metrics for its trackpad. */
@media (pointer: coarse) {
.btn {
min-height: 44px;
}
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);