fix(docs): tablet hamburger nav + mobile animation/code-wrap improvements#21513
Merged
fix(docs): tablet hamburger nav + mobile animation/code-wrap improvements#21513
Conversation
- Add hamburger/dropdown nav to CustomHeader.astro for 769–900px tablets to prevent the 7-link header from overflowing on iPad-size viewports. Includes ARIA attributes, keyboard (Escape) support, outside-click dismissal, focus management, and astro:page-load re-initialization. - Hide full nav at 769–900px in custom.css and show .tablet-nav-wrapper - Disable light-glow-move background animation on mobile (≤768px) to reduce CPU/battery usage - Add word-break: break-word to inline code on mobile to prevent horizontal overflow Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] [§23226379507] Fix header navigation overflow on tablets
fix(docs): tablet hamburger nav + mobile animation/code-wrap improvements
Mar 18, 2026
pelikhan
approved these changes
Mar 18, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Improves docs-site responsiveness by reducing overflow on small screens and adding a tablet-specific hamburger navigation to prevent header link overflow.
Changes:
- Add additional mobile overflow mitigations (inline code wrapping) and attempt to disable background animation on mobile.
- Replace tablet header overflow tweaks with a tablet-only hamburger menu (769–900px).
- Add hamburger dropdown markup, styling, and client-side toggle behavior in the custom header component.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| docs/src/styles/custom.css | Adds mobile wrapping rules and tablet media-query behavior to swap full nav for hamburger |
| docs/src/components/CustomHeader.astro | Introduces tablet hamburger dropdown navigation, styling, and initialization script |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| } | ||
|
|
||
| /* Disable heavy background animation on mobile to reduce CPU/battery usage */ | ||
| :root[data-theme='light'] body::before { |
Comment on lines
+138
to
+171
| function initHamburgerMenu() { | ||
| const hamburgerBtn = document.querySelector<HTMLButtonElement>('.hamburger-btn'); | ||
| const tabletDropdown = document.querySelector<HTMLElement>('.tablet-dropdown'); | ||
|
|
||
| if (!hamburgerBtn || !tabletDropdown) return; | ||
|
|
||
| hamburgerBtn.addEventListener('click', (e) => { | ||
| e.stopPropagation(); | ||
| const isOpen = hamburgerBtn.getAttribute('aria-expanded') === 'true'; | ||
| hamburgerBtn.setAttribute('aria-expanded', String(!isOpen)); | ||
| tabletDropdown.hidden = isOpen; | ||
| // Move focus to first link when opening for keyboard accessibility | ||
| if (!isOpen) { | ||
| const firstLink = tabletDropdown.querySelector<HTMLAnchorElement>('.dropdown-link'); | ||
| firstLink?.focus(); | ||
| } | ||
| }); | ||
|
|
||
| // Close when clicking outside the menu | ||
| document.addEventListener('click', (e) => { | ||
| if (!hamburgerBtn.contains(e.target as Node) && !tabletDropdown.contains(e.target as Node)) { | ||
| hamburgerBtn.setAttribute('aria-expanded', 'false'); | ||
| tabletDropdown.hidden = true; | ||
| } | ||
| }); | ||
|
|
||
| // Close on Escape key only when dropdown is open, for keyboard accessibility | ||
| document.addEventListener('keydown', (e) => { | ||
| if (e.key === 'Escape' && hamburgerBtn.getAttribute('aria-expanded') === 'true') { | ||
| hamburgerBtn.setAttribute('aria-expanded', 'false'); | ||
| tabletDropdown.hidden = true; | ||
| hamburgerBtn.focus(); | ||
| } | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
7 header links overflow on iPad-sized viewports (769–900px). Mobile also runs a heavy animated radial gradient and inline code can cause horizontal scroll.
Changes
docs/src/components/CustomHeader.astro<nav>rendered alongside the existing full navaria-expanded,aria-controls,hidden, Escape-to-close, focus moves to first link on open, outside-click dismissalastro:page-loadfor Starlight view transitionsdocs/src/styles/custom.css769–900px): full nav hidden (display: none !important),.tablet-nav-wrappershown (display: flex !important)≤768px): addedanimation: noneon:root[data-theme='light'] body::beforeto stop thelight-glow-moveradial gradient on mobile≤768px): addedword-break: break-wordto.sl-markdown-content code(inline code); previously onlypre codewas covered🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.