-
-
Notifications
You must be signed in to change notification settings - Fork 0
polish(header): theme toggle icon overlaps wordmark artwork on narrow viewports #1867
Copy link
Copy link
Open
Labels
prio:lowLow priority, including the default when no higher priority is supported.Low priority, including the default when no higher priority is supported.status:unconfirmedReported but not yet confirmed.Reported but not yet confirmed.type:designVisual design, themes, styling, layout, branding, interaction presentation, or design systems.Visual design, themes, styling, layout, branding, interaction presentation, or design systems.
Description
Activity
Metadata
Metadata
Assignees
Labels
prio:lowLow priority, including the default when no higher priority is supported.Low priority, including the default when no higher priority is supported.status:unconfirmedReported but not yet confirmed.Reported but not yet confirmed.type:designVisual design, themes, styling, layout, branding, interaction presentation, or design systems.Visual design, themes, styling, layout, branding, interaction presentation, or design systems.
Current behaviour
At a 390px viewport, the sun/moon theme-toggle icon in the fixed top-right corner visually collides with the tail of the large "dev*" wordmark glyphs beneath it, before any scroll has occurred. No z-index or contrast treatment currently separates them.
Suggested fix
Add a small backdrop chip or scrim behind the theme-toggle icon at narrow widths so it separates cleanly from the wordmark artwork on first paint.
Source
Found during a design critique of
src/components/layout/header/Header.astro(/impeccable critique), observed in a 390px-wide screenshot in Chrome. Persisted critique snapshot:.impeccable/critique/2026-08-10T15-06-59Z__src-components-layout-header-header-astro.md.