Skip to content

style: header design improvements#29123

Open
MohamedH1998 wants to merge 5 commits intostyle/sidebar-improvementsfrom
style/header-improvements
Open

style: header design improvements#29123
MohamedH1998 wants to merge 5 commits intostyle/sidebar-improvementsfrom
style/header-improvements

Conversation

@MohamedH1998
Copy link

@MohamedH1998 MohamedH1998 commented Mar 19, 2026

Summary

  • Clear background colour
  • Reduce the text size of the nav items and add hover states
  • Ensure vertical alignment of the nav items
  • Align hover states of the search command palette

Screenshots (optional)

Before
Screenshot 2026-03-19 at 22 48 27

Screenshot 2026-03-19 at 22 48 56

After
Screenshot 2026-03-19 at 22 49 14

Screenshot 2026-03-19 at 22 49 28

Screen recording

Screen.Recording.2026-03-19.at.22.49.40.mov

Documentation checklist

@MohamedH1998 MohamedH1998 changed the base branch from production to style/sidebar-improvements March 19, 2026 12:52
@github-actions
Copy link
Contributor

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern Owners
/src/components/ @cloudflare/content-engineering, @kodster28
*.astro @cloudflare/content-engineering, @kodster28
* @cloudflare/pcx-technical-writing

@github-actions
Copy link
Contributor

CI run failed: build logs

@github-actions
Copy link
Contributor

github-actions bot commented Mar 19, 2026

@MohamedH1998 MohamedH1998 force-pushed the style/header-improvements branch from 43bdb92 to 282b4e6 Compare March 19, 2026 13:37
@MohamedH1998 MohamedH1998 marked this pull request as ready for review March 19, 2026 17:10
@MohamedH1998 MohamedH1998 requested review from a team and kodster28 as code owners March 19, 2026 17:10
@mvvmm
Copy link
Contributor

mvvmm commented Mar 19, 2026

/bonk please review

@ask-bonk
Copy link
Contributor

ask-bonk bot commented Mar 19, 2026

The header design improvements look solid. The changes introduce theme-aware CSS variables, improve responsive behavior with the 800px breakpoint, and organize the header structure more cleanly.

Summary:

  • HeaderDropdowns.tsx: Updated to use CSS custom properties for theming consistency
  • changelog/Header.astro: Formatting improvements (Astro expression wrapping)
  • overrides/Header.astro: Better CSS organization with semantic class names, responsive #right-group visibility
  • tailwind.css: New header color tokens with proper light/dark mode support

Observations:

  • The CSS variable naming convention (--color-header-*) is consistent and follows the existing pattern
  • The 800px breakpoint for showing #right-group is a reasonable choice for mid-sized screens
  • The offset change from 5 to 8 in the floating UI middleware provides better visual spacing

No issues found. The preview at https://b97cbfca.preview.developers.cloudflare.com should show the improved header design.

github run

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants