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:
parent
17288589ef
commit
6a01850096
3 changed files with 56 additions and 2 deletions
|
|
@ -6,6 +6,16 @@
|
||||||
top of this and must NOT redeclare the colour variables; `theme.css`
|
top of this and must NOT redeclare the colour variables; `theme.css`
|
||||||
is the one source of truth. */
|
is the one source of truth. */
|
||||||
body {
|
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);
|
background: var(--bg);
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
|
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,30 @@ export function LinksMenu() {
|
||||||
aria-label="swarm services"
|
aria-label="swarm services"
|
||||||
onClick={() => setOpen((v) => !v)}
|
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>
|
</button>
|
||||||
{open ? (
|
{open ? (
|
||||||
<div class="links-menu-popover" role="menu">
|
<div class="links-menu-popover" role="menu">
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,28 @@ export function SettingsMenu() {
|
||||||
aria-label="settings"
|
aria-label="settings"
|
||||||
onClick={() => setOpen((v) => !v)}
|
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>
|
</button>
|
||||||
{open ? (
|
{open ? (
|
||||||
<div class="settings-menu-popover" role="menu">
|
<div class="settings-menu-popover" role="menu">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue