vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

swarm-ui: fix .shell-nav-link touch target argus caught

Browse source 
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.
This commit is contained in:
iris 2026-08-18 22:29:30 +02:00 • committed by mara
commit ea7cc03fd7
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/packages/swarm-ui/src/shell/Shell.css
View file

@ -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 {