Match header action-icon sizes to the search icon

[Jeehut]

Overview

The header action icons were visually mismatched in size. The theme-toggle (a filled moon) and, on multilingual sites, the language-picker (a globe) rendered noticeably larger and heavier than the search icon (a magnifier), even though their buttons are the same size. This makes the navigation bar's right-hand cluster look uneven on every generated site.

This PR normalizes the three icons so they read as one consistent size, with no other visual change.

Design

The mismatch is optical, not geometric. All three buttons share an identical box, and each icon is a 16×16 inline SVG. But the search magnifier is a stroked lens of radius 8 (∅16 within a 24-unit viewBox), while the moon is a filled disc of radius 10 (∅20) and the globe a stroked circle of radius 10 (∅20). At equal boxes the radius-10 glyphs draw ~25% wider, and the filled moon also reads heavier.

The fix pads each oversized icon's viewBox from 0 0 24 24 to -3 -3 30 30. This scales the drawn glyph to 24/30 = 0.8 and keeps it centered, so the disc/circle diameter matches the magnifier lens. The width="16" height="16" element box is untouched, so button height and vertical baseline are byte-for-byte identical — only the icon's drawn size changes. The search magnifier is left exactly as-is.

This lives in the icon markup that SiteKit's core emits (OutputFileRenderer+PageShell.swift), so every site picks it up on its next build with no theme or CSS edits.

Alternatives considered

• A CSS transform: scale(0.8) — rejected: it re-enters the per-site theme.css cascade, needs a transform-origin, and risks sub-pixel blur.
• Changing the SVG width/height — rejected: that shrinks the element box and would break the button-height/baseline equality that is the whole point.
• Editing the glyph path geometry (e.g. the globe's bezier meridian) — rejected: error-prone, multi-coordinate, for no benefit over a one-attribute viewBox pad.
• A base.css box rule — rejected: the button boxes were never wrong, so there is nothing to fix at the box level.

In scope

• Theme-toggle (moon) icon size.
• Language-picker (globe) icon size, where present (multilingual sites).

Out of scope

• The search magnifier (it is the reference size, unchanged).
• DocC chrome, which has its own separate theme toggle (untouched).
• Any layout, spacing, color, or box change — by design there is none.

Before / after

The header's right-hand action cluster — search (magnifier) · language (globe, multilingual only) · theme-toggle (moon) — captured on the Classic, Sidebar and Minimal layouts plus a real production site, in light and dark mode:

• Before: the moon renders as a large, heavy filled disc and the globe as an oversized circle, both clearly bigger than the magnifier lens next to them. The cluster looks uneven.
• After: all three glyphs read at the same size and weight. The button boxes, heights and baselines are byte-for-byte unchanged — only the drawn glyph size shrinks to match the lens.

Measured: the moon/globe drawn diameter goes from 13.3px to 10.7px (the magnifier's size); every button's border-box and center-Y stays identical to 0.1px. Annotated before/after boards across all seven surfaces are attached for the reviewer.

How I verified

• Built real site output (swift run Site build) for the Classic, Sidebar and Minimal layouts and measured the rendered header with Playwright (getBoundingClientRect + SVG getBBox): every button border-box and center-Y is identical before vs. after, to 0.1px; only the drawn glyph diameter changes (13.3px → 10.7px, matching the magnifier).
• Rebuilt a real production site (fline.dev, multilingual, 1491 pages) against the patched library: the only difference in the entire output is the two viewBox strings — base.css is byte-identical (md5 unchanged), and every other byte (CSS, asset fingerprints, nav, meta, the search icon's own viewBox) is unchanged.
• Independently re-verified across 7 surfaces (fline.dev light + dark, EvolutionKit, Classic, Sidebar, Minimal, a fresh Blog scaffold): in every "after" the moon and globe match the magnifier; dark mode has parity (icons use currentColor).
• swift build clean; swift test — 872 tests pass.

Notes for reviewers

• The whole change is two viewBox attribute edits in one file; the long comment additions explain the optics for future readers.
• A known cosmetic side-effect: scaling the globe also thins its stroke by ~0.26px (1.07px vs the magnifier's 1.33px). It reads cleanly in the renders and is noticeable only side-by-side; a stroke-width: ~2.5 on the globe would restore it exactly if ever desired.