Skip to content

Sync Chrome.tsx wordmark <img> intrinsic dimensions to 411×110 (match Close.tsx and SVG source) #50

Description

@yigitdot

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions