vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

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

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 }) {
const [active] = useRoute(href);
return (
<Link href={href} className={'shell-nav-link' + (active ? ' shell-nav-link-active' : '')}>
{label}
<Link href={href} className="shell-nav-link">
{/* 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>
);
}