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

@ -6,6 +6,16 @@
top of this and must NOT redeclare the colour variables; `theme.css`
is the one source of truth. */
body {
/* The default UA stylesheet gives `body` an 8px margin every page
using this shared base had it as a `--bg`-coloured strip visible
around the whole viewport edge, e.g. left/right of any full-bleed
header (swarm-ui's `.shell-header`, `--bg-elev`, doesn't actually
reach the real viewport edge without this). Reported live as
"small bg colored gap left and right of the header" (reported live
by mara).
Zeroed here since every page linking this file wants full-bleed
chrome, not a browser default nobody asked for. */
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;

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">

View file

@ -50,7 +50,28 @@ export function SettingsMenu() {
aria-label="settings"
onClick={() => setOpen((v) => !v)}
>
{/* Feather/lucide "settings" glyph, not the bare `` character
reported live by mara: icon styles/sizes inconsistent between
this button and LinksMenu's. `` is a plain text glyph so it does
scale with `font-size`/`color`, but its exact shape and
optical weight are down to whatever font the browser
substitutes for that one codepoint not guaranteed to match
an SVG icon at all, which is what LinksMenu's link glyph is
now built from too. One shared rendering path for both. */}
<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"
>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</button>
{open ? (
<div class="settings-menu-popover" role="menu">