Test Summary
- Triggered by:
@pelikhan
- Workflow run: §24834393273
- Devices tested: 6
- Test date: 2026-04-23
- Testing method: Static HTML/CSS analysis (Playwright MCP connectivity unavailable; fallback to curl + Python HTML parsing)
Results Overview
- 🟢 Passed: 5
- 🟡 Warnings: 1
- 🔴 Critical: 0
Critical Issues
No critical issues found. All pages returned HTTP 200 and core layout structures were intact across all tested viewports.
Warnings
iPad (768×1024) — Header Navigation Gap at Exact Breakpoint
The CSS uses max-width: 768px to hide .custom-header-links and min-width: 769px to show the tablet hamburger menu, creating a 1px boundary where the iPad at exactly 768px gets neither header nav links nor the tablet hamburger.
- The left sidebar remains persistent (activated at
48rem = 768px), so navigation content is still reachable
- However, the header appears sparse — showing only a search icon — which reduces discoverability for new users
- Suggested fix: Change the tablet hamburger trigger from
769px to 768px to close the gap
View Detailed Test Results by Device
Mobile Devices
| Device |
Viewport |
Status |
Notes |
| iPhone 12 |
390×844 |
🟢 Pass |
Hamburger sidebar, 44px touch targets, code blocks word-wrap, animations off |
| Pixel 5 |
393×851 |
🟢 Pass |
Identical mobile behavior (both < 768px breakpoint) |
Both mobile devices correctly enter the mobile layout. Touch targets meet the 44px minimum, code blocks use word-wrap to prevent horizontal scrolling, and background animations are disabled for performance/battery.
Tablet Devices
| Device |
Viewport |
Status |
Notes |
| iPad |
768×1024 |
🟡 Warning |
Header nav gap at exact 768px breakpoint (see Warnings above) |
| iPad Pro 11 |
834×1194 |
🟢 Pass |
CSS explicitly targets 769–900px; tablet hamburger + persistent sidebar |
Desktop Devices
| Device |
Viewport |
Status |
Notes |
| HD Desktop |
1366×768 |
🟢 Pass |
Full nav links, persistent sidebar, right ToC sidebar at 1152px+ |
| FHD Desktop |
1920×1080 |
🟢 Pass |
Full navigation, both sidebars, max-width constraints preserve readability |
Pages Tested
/gh-aw/ — HTTP 200/gh-aw/setup/quick-start/ — HTTP 200/gh-aw/introduction/overview/ — HTTP 200/gh-aw/reference/faq/ — HTTP 200/gh-aw/blog/ — HTTP 200
Accessibility Findings
The site demonstrates strong accessibility foundations:
- ✅
<meta name="viewport"> present
- ✅
lang="en" on <html>
- ✅ Semantic landmarks:
<main>, <nav>, <header>, <footer>
- ✅ Skip link present (
href="#_top")
- ✅ Focus-visible styles applied
- ✅
prefers-contrast media query supported
- ✅
prefers-reduced-motion supported (animations disabled)
- ✅ Dark/light mode toggle available
- ✅ 44px minimum touch targets on mobile
Recommendations
- Fix iPad breakpoint gap (low effort): In the CSS, change the tablet hamburger visibility from
min-width: 769px to min-width: 768px to ensure the iPad at exactly 768px sees either header nav links or the hamburger — not neither.
- Visual screenshot testing: Consider enabling Playwright network-host mode in the workflow so visual regression screenshots can be captured alongside HTML analysis.
References:
Generated by Multi-Device Docs Tester · ● 305.6K · ◷
Test Summary
@pelikhanResults Overview
Critical Issues
No critical issues found. All pages returned HTTP 200 and core layout structures were intact across all tested viewports.
Warnings
iPad (768×1024) — Header Navigation Gap at Exact Breakpoint
The CSS uses
max-width: 768pxto hide.custom-header-linksandmin-width: 769pxto show the tablet hamburger menu, creating a 1px boundary where the iPad at exactly 768px gets neither header nav links nor the tablet hamburger.48rem = 768px), so navigation content is still reachable769pxto768pxto close the gapView Detailed Test Results by Device
Mobile Devices
Both mobile devices correctly enter the mobile layout. Touch targets meet the 44px minimum, code blocks use
word-wrapto prevent horizontal scrolling, and background animations are disabled for performance/battery.Tablet Devices
Desktop Devices
Pages Tested
/gh-aw/— HTTP 200/gh-aw/setup/quick-start/— HTTP 200/gh-aw/introduction/overview/— HTTP 200/gh-aw/reference/faq/— HTTP 200/gh-aw/blog/— HTTP 200Accessibility Findings
The site demonstrates strong accessibility foundations:
<meta name="viewport">presentlang="en"on<html><main>,<nav>,<header>,<footer>href="#_top")prefers-contrastmedia query supportedprefers-reduced-motionsupported (animations disabled)Recommendations
min-width: 769pxtomin-width: 768pxto ensure the iPad at exactly 768px sees either header nav links or the hamburger — not neither.References: