Skip to content

Chrome.tsx wordmark: declare SVG intrinsic dimensions (411×110) for cross-file consistency #49

Description

@yigitdot

Background

The same canonical wordmark SVG (public/wordmark-light.svg, authored width="411" height="110", viewBox 0 30 411 110) is rendered in two places via <img> elements that declare different HTML intrinsic dimensions:

  • components/site/Chrome.tsx:136-137,144-145 — width={112} height={30} (ratio 3.7333)
  • components/site/Close.tsx:26-27 — width={411} height={110} (ratio 3.7364 — matches the SVG's authored ratio)

The drift is ~0.08%, visually invisible. But the HTML width/height attrs feed the browser's aspect-ratio reservation; for one canonical asset it's cleaner to declare its real intrinsic dimensions in every call site.

Proposal

Update Chrome.tsx lines 136-137 and 144-145:

-            width={112}
-            height={30}
+            width={411}
+            height={110}

CSS continues to control rendered size (the navbar wordmark renders ~112×30 visually because of surrounding layout / the parent's gap; the HTML attrs only inform the browser's aspect-ratio computation, which is unchanged in practice but now uses the asset's real numbers).

Why this came up

Surfaced by code-reviewer in the comprehensive review of #47 (#47). #47 added width={411} height={110} to the new Close.tsx <img> for CLS reasons; the cross-file drift became visible during that review. Out of scope for #47 since it wouldn't change anything observable, but worth fixing for codebase consistency.

Acceptance

  • Chrome.tsx light + dark wordmark variants both use width={411} height={110}.
  • No visual regression in the navbar at any viewport.

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