From 6b34293cd3f3c3328f0c02f639f79014894e66ea Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Fri, 9 Oct 2026 18:04:21 +0200
Subject: [PATCH] fix: apply the 44px button target only to coarse pointers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app/globals.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

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);