diff --git a/src/app/globals.css b/src/app/globals.css index ecea745a..0a015639 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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);