Fix docs nav dropdown rendering off-screen with large fonts on Android Chrome

[Copilot]

On Android Chrome with OS-level large font accessibility settings, the header navigation dropdown appeared off to the side of the viewport. Three compounding causes:

1. overflow-x: hidden on html (not just body) — breaks position: fixed overlays on mobile Chrome
2. No text-size-adjust — Chrome's automatic text inflation shifted header items out of their flex positions
3. .tablet-dropdown used position: absolute; right: 0 relative to a potentially-displaced parent

Changes

• custom.css

  • Split body, html { overflow-x: hidden } — removes the property from html, retains it on body
  • Adds -webkit-text-size-adjust: 100%; text-size-adjust: 100% to :root to suppress automatic font inflation

• CustomHeader.astro

  • Switches .tablet-dropdown to position: fixed with max-width: calc(100vw - 2rem)
  • Adds positionDropdown() — called on each open, uses getBoundingClientRect() on the button to compute viewport-relative top/right, clamped to stay on-screen; falls back to left-alignment when right-align would clip

function positionDropdown() {
  const VIEWPORT_EDGE_PADDING = 8;
  const rect = hamburgerBtn.getBoundingClientRect();
  let right = Math.max(window.innerWidth - rect.right, VIEWPORT_EDGE_PADDING);
  tabletDropdown.style.top = `${rect.bottom + VIEWPORT_EDGE_PADDING}px`;
  tabletDropdown.style.right = `${right}px`;
  // flip to left-align if dropdown would bleed off the left edge
  if (window.innerWidth - right - dropdownWidth < VIEWPORT_EDGE_PADDING) {
    tabletDropdown.style.left = `${Math.max(rect.left, VIEWPORT_EDGE_PADDING)}px`;
    tabletDropdown.style.right = 'auto';
  }
}

• mobile-responsive.spec.ts — adds regression test that injects font-size: 20px on html and asserts the opened dropdown's bounding box stays within the 393px viewport

[Copilot]

Pull request overview

Fixes the docs header navigation dropdown rendering off-screen on Android Chrome when OS-level large font accessibility settings are enabled.

Changes:

• Updates global CSS to avoid overflow-x: hidden on html and to suppress Chrome text inflation via text-size-adjust.
• Changes the header dropdown to use position: fixed and adds JS logic to compute/clamp dropdown placement to the viewport.
• Adds a Playwright regression test asserting the dropdown stays within the viewport under simulated large font sizing.

Show a summary per file

File	Description
docs/tests/mobile-responsive.spec.ts	Adds a regression test for hamburger dropdown viewport bounds under large-font conditions.
docs/src/styles/custom.css	Adjusts overflow handling and adds text-size-adjust rules to mitigate Android Chrome text inflation/layout shifts.
docs/src/components/CustomHeader.astro	Switches dropdown to fixed positioning and introduces JS-driven viewport-relative positioning/clamping on open.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

• Files reviewed: 3/3 changed files
• Comments generated: 2

[github-actions]

🧪 Test Quality Sentinel Report

Test Quality Score: N/A

i️ Outside Analysis Scope — no Go or JavaScript test files were modified in this PR.

Metric	Value
New/modified tests analyzed	0 (Go + JavaScript)
�� Go (*_test.go)	0
🟨 JavaScript (*.test.cjs, *.test.js)	0
🔷 TypeScript/Playwright (*.spec.ts)	1 (detected, not scored)

---

Language Support

Tests analyzed:

• 🐹 Go (*_test.go): 0 tests
• 🟨 JavaScript (*.test.cjs, *.test.js): 0 tests (vitest)

i️ One TypeScript/Playwright test was found in docs/tests/mobile-responsive.spec.ts but is outside the current analysis scope (Go and JavaScript supported).

Observed test (docs/tests/mobile-responsive.spec.ts):

• hamburger dropdown stays within viewport with large user fonts — a regression test for issue Docs problem on android Chrome with large user fonts #29545 that simulates Android Chrome large-font accessibility scaling and asserts the navigation dropdown bounding box stays within the viewport. This appears to be a high-value behavioral contract test that directly guards the fix introduced in this PR.

---

Verdict

✅ Check passed. No Go or JavaScript test files were modified. The TypeScript/Playwright regression test added is outside the scoring scope but appears to be a high-quality behavioral test directly validating the fix.

🧪 Test quality analysis by Test Quality Sentinel · ● 404.7K · ◷

[github-actions]

✅ Test Quality Sentinel: N/A. No Go or JavaScript test files were modified. The TypeScript/Playwright regression test added is outside scoring scope but appears high-quality — it directly validates the behavioral fix for issue #29545.

[pelikhan]

@copilot review all comments

[Copilot]

@copilot review all comments

Both reviewer comments addressed in 592dbc7:

• MIN_DROPDOWN_WIDTH sync issue: replaced the hardcoded constant with parseFloat(getComputedStyle(tabletDropdown).minWidth) || 0 so the JS automatically reads the value from CSS — no manual sync needed.
• addStyleTag before navigation: moved page.addStyleTag() to after page.goto() + waitForLoadState('networkidle') so the document is ready when the style tag is attached.