From ea7cc03fd7fd92e47ea3e13dbedf565d435c791c Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Tue, 18 Aug 2026 22:29:30 +0200
Subject: [PATCH] swarm-ui: fix .shell-nav-link touch target argus caught
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The proposed scope on this issue named three things to give the
2.75em touch-target floor: nav links, buttons, and the links-menu
trigger. Only the links-menu trigger actually got it in the first
pass — the primary nav (hives/new agent/jobs/components), the
highest-traffic touch target in the whole shell, was still sitting at
padding: 0.25em 0 (~27px tall).

display: flex + min-height rather than more padding: padding alone
would have pushed the active-state border-bottom away from the text
to reach 2.75em; flex centres the text within the full-height box so
the indicator still sits directly under it.

Verified: build succeeds, screenshotted at desktop width and 320px —
active underline still sits correctly under the text at the taller
height, wrap behavior from the earlier commit unaffected.
---
 frontend/packages/swarm-ui/src/shell/Shell.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/swarm-ui/src/shell/Shell.css b/frontend/packages/swarm-ui/src/shell/Shell.css
index 9b8833c1..48d0a31f 100644
--- a/frontend/packages/swarm-ui/src/shell/Shell.css
+++ b/frontend/packages/swarm-ui/src/shell/Shell.css
@@ -28,10 +28,20 @@
   flex-wrap: wrap;
   gap: 1em;
 }
+/* `display: flex` + `min-height` rather than more vertical padding: a
+   link's own height is text-line-height, and padding alone would have
+   pushed the border-bottom indicator away from the text to hit 2.75em
+   — flex centres the text within the full-height box instead, so the
+   indicator still sits directly under it. Same 2.75em (~44px, WCAG
+   2.5.5) floor as the rest of the shared kit — this is the primary
+   nav, the single most-clicked/tapped element in the whole shell, so
+   it gets the floor same as everything else, not a smaller one. */
 .shell-nav-link {
+  display: flex;
+  align-items: center;
+  min-height: 2.75em;
   color: var(--muted);
   text-decoration: none;
-  padding: 0.25em 0;
   border-bottom: 2px solid transparent;
 }
 .shell-nav-link:hover {