From 6d5e34b196e06009dc1d9a77f842d8035dc42de4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 02:44:15 +0000
Subject: [PATCH 1/2] Initial plan


From 68847c75f28b44e054dd47420743254386241d8f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 18 Mar 2026 02:59:38 +0000
Subject: [PATCH 2/2] fix: add tablet hamburger menu and mobile CSS
 improvements for docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 docs/src/components/CustomHeader.astro | 135 +++++++++++++++++++++++++
 docs/src/styles/custom.css             |  29 ++++--
 2 files changed, 155 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/CustomHeader.astro b/docs/src/components/CustomHeader.astro
index 8e23bfb1343..10b1a644eaf 100644
--- a/docs/src/components/CustomHeader.astro
+++ b/docs/src/components/CustomHeader.astro
@@ -15,6 +15,23 @@ const base = import.meta.env.BASE_URL;
 	<a href={`${base}blog/`} class="header-link">Blog</a>
 	<a href={`${base}blog/2026-01-12-welcome-to-pelis-agent-factory/`} class="header-link">Peli's Agent Factory</a>
 </nav>
+
+<!-- Hamburger menu for tablets (769–900px) where full nav would overflow -->
+<div class="tablet-nav-wrapper">
+	<button class="hamburger-btn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="tablet-nav-dropdown">
+		<span class="hamburger-icon" aria-hidden="true"></span>
+	</button>
+	<nav class="tablet-dropdown" id="tablet-nav-dropdown" aria-label="Primary navigation" hidden>
+		<a href={`${base}setup/quick-start/`} class="dropdown-link">Quick Start</a>
+		<a href={`${base}setup/creating-workflows/`} class="dropdown-link">Create</a>
+		<a href={`${base}index.html#gallery`} class="dropdown-link">Examples</a>
+		<a href={`${base}introduction/overview/`} class="dropdown-link">Docs</a>
+		<a href={`${base}reference/faq/`} class="dropdown-link">FAQ</a>
+		<a href={`${base}blog/`} class="dropdown-link">Blog</a>
+		<a href={`${base}blog/2026-01-12-welcome-to-pelis-agent-factory/`} class="dropdown-link">Peli's Agent Factory</a>
+	</nav>
+</div>
+
 <Default {...Astro.props} />
 
 <style>
@@ -39,4 +56,122 @@ const base = import.meta.env.BASE_URL;
 		color: var(--sl-color-text-accent);
 		background-color: rgba(110, 118, 129, 0.1);
 	}
+
+	/* Tablet navigation wrapper — hidden by default; shown via global CSS at 769–900px */
+	.tablet-nav-wrapper {
+		display: none;
+		position: relative;
+		margin-right: 0.5rem;
+	}
+
+	.hamburger-btn {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.5rem;
+		color: var(--sl-color-text);
+		border-radius: 4px;
+		min-height: 44px;
+		min-width: 44px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.hamburger-btn:hover {
+		background-color: rgba(110, 118, 129, 0.1);
+	}
+
+	/* Three-line hamburger icon built with CSS pseudo-elements */
+	.hamburger-icon {
+		display: block;
+		width: 20px;
+		height: 2px;
+		background: currentColor;
+		position: relative;
+	}
+
+	.hamburger-icon::before,
+	.hamburger-icon::after {
+		content: '';
+		display: block;
+		width: 20px;
+		height: 2px;
+		background: currentColor;
+		position: absolute;
+		left: 0;
+	}
+
+	.hamburger-icon::before { top: -6px; }
+	.hamburger-icon::after  { top:  6px; }
+
+	.tablet-dropdown {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		right: 0;
+		background: var(--sl-color-bg-nav, #161b22);
+		border: 1px solid rgba(48, 54, 61, 0.8);
+		border-radius: 8px;
+		padding: 0.5rem 0;
+		min-width: 180px;
+		z-index: 100;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+	}
+
+	.dropdown-link {
+		display: block;
+		padding: 0.625rem 1rem;
+		color: var(--sl-color-text);
+		text-decoration: none;
+		font-size: 0.875rem;
+		font-weight: 500;
+		transition: background-color 0.15s ease;
+	}
+
+	.dropdown-link:hover {
+		background-color: rgba(110, 118, 129, 0.1);
+		color: var(--sl-color-text-accent);
+	}
 </style>
+
+<script>
+	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();
+			}
+		});
+	}
+
+	// Initialize on first load and after Astro page transitions
+	initHamburgerMenu();
+	document.addEventListener('astro:page-load', initHamburgerMenu);
+</script>
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 721a1eb6890..d60c44d846d 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1594,20 +1594,31 @@ main,
     word-break: break-word;
     overflow-wrap: break-word;
   }
+
+  /* Also wrap inline code on mobile to avoid horizontal overflow */
+  .sl-markdown-content code {
+    word-break: break-word;
+  }
+
+  /* Disable heavy background animation on mobile to reduce CPU/battery usage */
+  :root[data-theme='light'] body::before {
+    animation: none;
+  }
 }
 
-/* Additional tablet-specific fixes (iPad Pro 11 at 834px) */
-@media (min-width: 768px) and (max-width: 900px) {
-  /* Ensure header doesn't overflow on tablets */
+/* Tablet-specific fixes (iPad Pro 11 at 834px) — header hamburger */
+@media (min-width: 769px) and (max-width: 900px) {
+  /* Hide full nav to prevent overflow; hamburger replaces it */
   .custom-header-links {
-    gap: 0.5rem !important;
+    display: none !important;
   }
-  
-  .header-link {
-    font-size: 0.8125rem !important;
-    padding: 0.25rem 0.5rem !important;
+
+  /* Show tablet hamburger wrapper */
+  .tablet-nav-wrapper {
+    display: flex !important;
+    align-items: center;
   }
-  
+
   /* Ensure content has proper padding on tablets */
   .sl-markdown-content {
     padding-left: 1rem;