From 6a0185009631d0e4938e90de5bbc5bf86f83a420 Mon Sep 17 00:00:00 2001 From: iris Date: Mon, 24 Aug 2026 18:32:20 +0200 Subject: [PATCH] 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. --- frontend/packages/shared/src/base.css | 10 ++++++++ .../packages/swarm-ui/src/shell/LinksMenu.tsx | 25 ++++++++++++++++++- .../swarm-ui/src/shell/SettingsMenu.tsx | 23 ++++++++++++++++- 3 files changed, 56 insertions(+), 2 deletions(-) diff --git a/frontend/packages/shared/src/base.css b/frontend/packages/shared/src/base.css index 47c908da..ff68d58c 100644 --- a/frontend/packages/shared/src/base.css +++ b/frontend/packages/shared/src/base.css @@ -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; diff --git a/frontend/packages/swarm-ui/src/shell/LinksMenu.tsx b/frontend/packages/swarm-ui/src/shell/LinksMenu.tsx index 725a0d4d..10180908 100644 --- a/frontend/packages/swarm-ui/src/shell/LinksMenu.tsx +++ b/frontend/packages/swarm-ui/src/shell/LinksMenu.tsx @@ -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). */} + {open ? (