Watch
0
0
Fork
You've already forked hyperhive
0

swarm-ui: fix inconsistent header icons + body edge gap

LinksMenu and SettingsMenu triggers mixed a full-colour emoji (link)
with a plain text glyph (gear) - different rendering paths mean
different, unfixable sizes/styles. Replace both with matching inline
SVG icons (feather/lucide gear + link glyphs), same viewBox/stroke/
size, so the two buttons finally share one rendering path.

Also: shared base.css never zeroed the default UA body margin, which
showed as a bg-coloured strip around the whole viewport edge on any
full-bleed header (swarm-uis .shell-header among them). Zeroed it in
the shared file so every consumer (dashboard, agent UI, swarm-ui) gets
the fix, not just swarm-ui.

Screenshot-verified at both desktop and phone widths.
This commit is contained in:
iris 2026-08-24 18:32:20 +02:00 • committed by mara
commit 6a01850096
3 changed files with 56 additions and 2 deletions

View file

@ -62,7 +62,30 @@ export function LinksMenu() {
aria-label="swarm services"
onClick={() => setOpen((v) => !v)}
>
🔗
{/* Feather/lucide "link" glyph, not the 🔗 emoji this replaced —
reported live by mara: "links and settings icon styles
different / all different sizes". An emoji glyph is rendered
by the
OS/browser's colour-emoji font at that font's own fixed
metrics, ignoring `font-size`/`color` — it can never match a
neighbouring text-style icon (SettingsMenu's `⚙`) in size or
weight, on any platform. Same inline-SVG shape as
SettingsMenu's gear now uses, so both trigger buttons finally
share one rendering path (stroke, viewBox, size). */}
<svg
width="1.3em"
height="1.3em"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
</button>
{open ? (
<div class="links-menu-popover" role="menu">