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

swarm-ui: fix nav underline gap argus caught in round 2

Browse source 
The previous fix put both the touch-target min-height and the
active-state border-bottom on the same <a>: centering the text
within a 2.75em box pushed the border ~0.7em away from it, a real
visible regression argus caught by actually rendering the CSS rather
than reasoning about the box model abstractly.

Split the two concerns onto two elements: the <a> (.shell-nav-link)
owns the full-height tappable box, an inner <span>
(.shell-nav-link-text) wrapping just the label owns the underline,
so the indicator stays directly under the text regardless of the
tappable box's height.

Verified: tsc clean, build succeeds, screenshotted close-up (600x100)
and at 320px — underline sits flush under the text in both, no gap.
This commit is contained in:
iris 2026-08-18 22:35:58 +02:00 • committed by mara
commit 328ba19595
2 changed files with 22 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,25 +28,32 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 1em; gap: 1em;
} }
/* `display: flex` + `min-height` rather than more vertical padding: a /* Touch target and active-state underline are deliberately on two
link's own height is text-line-height, and padding alone would have different elements. An earlier version put both `min-height: 2.75em`
pushed the border-bottom indicator away from the text to hit 2.75em and `border-bottom` on the same box: centering the text within a
— flex centres the text within the full-height box instead, so the 2.75em box pushes a bottom-edge border ~0.7em away from the text,
indicator still sits directly under it. Same 2.75em (~44px, WCAG which argus caught by actually rendering it — a real visual
2.5.5) floor as the rest of the shared kit — this is the primary regression, not just a touch-target win. So: `.shell-nav-link` (the
nav, the single most-clicked/tapped element in the whole shell, so `<a>`) owns the full-height tappable box (same 2.75em / ~44px WCAG
it gets the floor same as everything else, not a smaller one. */ 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), and
`.shell-nav-link-text` (an inner span hugging just the text) owns
the underline, so the indicator stays directly under the label
regardless of how tall the tappable box around it is. */
.shell-nav-link { .shell-nav-link {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 2.75em; min-height: 2.75em;
color: var(--muted); color: var(--muted);
text-decoration: none; text-decoration: none;
border-bottom: 2px solid transparent;
} }
.shell-nav-link:hover { .shell-nav-link:hover {
color: var(--fg); color: var(--fg);
} }
.shell-nav-link-text {
padding-bottom: 0.25em;
border-bottom: 2px solid transparent;
}
.shell-nav-link-active { .shell-nav-link-active {
color: var(--fg); color: var(--fg);
border-bottom-color: var(--purple); border-bottom-color: var(--purple);

8
frontend/packages/swarm-ui/src/shell/Shell.tsx
View file

@ -34,8 +34,12 @@ const DEFAULT_BRAND = 'hyperhive swarm';
function NavLink({ href, label }: { href: string; label: string }) { function NavLink({ href, label }: { href: string; label: string }) {
const [active] = useRoute(href); const [active] = useRoute(href);
return ( return (
<Link href={href} className={'shell-nav-link' + (active ? ' shell-nav-link-active' : '')}> <Link href={href} className="shell-nav-link">
{label} {/* Touch target (min-height) lives on the <a> so the whole row is
tappable; the active-state underline lives on this inner span
so it hugs the text instead of sitting at the bottom of the
full-height box, ~0.7em away from it. */}
<span class={'shell-nav-link-text' + (active ? ' shell-nav-link-active' : '')}>{label}</span>
</Link> </Link>
); );
} }