Skip to content

style: header design improvements#29123

Merged
MohamedH1998 merged 6 commits intostyle/sidebar-improvementsfrom
style/header-improvements
Mar 20, 2026
Merged

style: header design improvements#29123
MohamedH1998 merged 6 commits intostyle/sidebar-improvementsfrom
style/header-improvements

Conversation

@MohamedH1998
Copy link
Contributor

@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

* style: toc design improvements

* fix: keyboard nav in feedback form

* fix: decrease textarea rows

* fix: vertical alignment of the toc

* Update src/components/overrides/TableOfContents.astro

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>

---------

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>
@MohamedH1998 MohamedH1998 merged commit 3a4d0dd into style/sidebar-improvements Mar 20, 2026
1 of 2 checks passed
@MohamedH1998 MohamedH1998 deleted the style/header-improvements branch March 20, 2026 14:10
MohamedH1998 added a commit that referenced this pull request Mar 20, 2026
* style: improve sidebar item layout, focus style, and spacing

* fix: change icon path

* fix: revert icon path

* fix: fix build error

* style: PR comment fixes

* style: refine sidebar

* style: show active state in parents of nested items

* fix: ci failure

* style: improve theming

* fix: improve animation

* Update src/components/overrides/SidebarSublist.astro

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>

* style: header design improvements (#29123)

* style: header design tweaks

* fix: align vertically

* style: toc design improvements (#29124)

* style: toc design improvements

* fix: keyboard nav in feedback form

* fix: decrease textarea rows

* fix: vertical alignment of the toc

* Update src/components/overrides/TableOfContents.astro

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>

---------

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>

---------

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>

---------

Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>
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