Background
The canonical wordmark asset public/wordmark-light.svg declares its authored intrinsic dimensions as:
<svg width="411" height="110" viewBox="0 30 411 110" ...>
After #47, components/site/Close.tsx:26-27 declares the matching attrs on its <img>:
<img src="/wordmark-light.svg" ... width={411} height={110} ... />
The two <img> instances in components/site/Chrome.tsx still carry the older smaller dimensions:
components/site/Chrome.tsx:136-137 (light variant): width={112} height={30}
components/site/Chrome.tsx:144-145 (dark variant): width={112} height={30}
Issue
112 / 30 ≈ 3.7333, while the SVG's authored ratio 411 / 110 ≈ 3.7364. The drift is ~0.08% — visually invisible, no CLS regression — but it's the same canonical asset declared in two call sites with different numbers, and one of them no longer matches the source.
The HTML width / height attrs only feed the browser's aspect-ratio reservation; CSS still controls rendered size in both files (the navbar wordmark renders at ~112×30 regardless). So this is purely a convention/consistency cleanup.
Surfaced by a code-reviewer pass on #47 (#47).
Proposed change
Update both <img> blocks in Chrome.tsx to use the SVG's authored dimensions:
<img
src="/wordmark-light.svg"
alt="decdn"
- width={112}
- height={30}
+ width={411}
+ height={110}
className={onDark ? "hidden" : "block"}
/>
<img
src="/wordmark-dark.svg"
alt="decdn"
- width={112}
- height={30}
+ width={411}
+ height={110}
className={onDark ? "block" : "hidden"}
/>
The rendered navbar size is unchanged because no CSS is touching width/height on those elements — the browser would already compute width from the resource's intrinsic dimensions; the attrs were just providing a (slightly off) hint for the CLS reservation. After the change, both call sites declare the wordmark's real authored dimensions verbatim.
Verification
pnpm build succeeds (static export).
- Navbar wordmark renders identically (same pixel size in both light and dark mode toggles).
- DOM inspector confirms
width="411" height="110" on both navbar variants.
Background
The canonical wordmark asset
public/wordmark-light.svgdeclares its authored intrinsic dimensions as:After #47,
components/site/Close.tsx:26-27declares the matching attrs on its<img>:The two
<img>instances incomponents/site/Chrome.tsxstill carry the older smaller dimensions:components/site/Chrome.tsx:136-137(light variant):width={112} height={30}components/site/Chrome.tsx:144-145(dark variant):width={112} height={30}Issue
112 / 30 ≈ 3.7333, while the SVG's authored ratio411 / 110 ≈ 3.7364. The drift is ~0.08% — visually invisible, no CLS regression — but it's the same canonical asset declared in two call sites with different numbers, and one of them no longer matches the source.The HTML
width/heightattrs only feed the browser's aspect-ratio reservation; CSS still controls rendered size in both files (the navbar wordmark renders at ~112×30 regardless). So this is purely a convention/consistency cleanup.Surfaced by a code-reviewer pass on #47 (#47).
Proposed change
Update both
<img>blocks inChrome.tsxto use the SVG's authored dimensions:<img src="/wordmark-light.svg" alt="decdn" - width={112} - height={30} + width={411} + height={110} className={onDark ? "hidden" : "block"} /> <img src="/wordmark-dark.svg" alt="decdn" - width={112} - height={30} + width={411} + height={110} className={onDark ? "block" : "hidden"} />The rendered navbar size is unchanged because no CSS is touching width/height on those elements — the browser would already compute width from the resource's intrinsic dimensions; the attrs were just providing a (slightly off) hint for the CLS reservation. After the change, both call sites declare the wordmark's real authored dimensions verbatim.
Verification
pnpm buildsucceeds (static export).width="411" height="110"on both navbar variants.