🔍 Multi-Device Docs Testing Report - 2026-03-23 #22363
Description
Test Summary
- Triggered by:
@pelikhan - Workflow run: §23418974864
- Target: Production site —
https://github.github.com/gh-aw/(local dev server inaccessible from Playwright due to container network firewall; production site tested as equivalent) - Devices tested: 10
- Test date: 2026-03-23
Results Overview
- 🟢 Passed: 9 devices
- 🟡 Warnings: 1 device (iPad Pro 11)
- 🔴 Critical: 0
Warning: Feature Grid Overflow on iPad Pro 11 (834×1194)
On the homepage, the .feature-grid.columns-3 component renders 3 columns at viewports ≥ 800px (min-width: 50rem). However, at 834px viewport width, Starlight's layout leaves only ~760px of content width. With each column having minmax(20rem, 1fr) = minimum 320px, the required width is:
3 × 320px + 2 × 20px (gaps) = 1000px > 760px available
Result: Every third card in each row starts at x=712 and extends to x=1032 — 198px beyond the viewport edge. The cards are clipped by overflow: hidden on the parent <main>, so there's no horizontal scrollbar, but the third column card content is visually cut off.
Affected breakpoint: ~800px–1000px viewport width (where 3-col grid activates but content area is too narrow).
Root cause in docs/src/components/FeatureGrid.astro:
`@media` (min-width: 50rem) {
.feature-grid.columns-3 {
grid-template-columns: repeat(3, minmax(20rem, 1fr));
}
}Recommended fix — use a higher breakpoint or reduce the minimum column size:
/* Option A: raise the breakpoint for 3-col layout */
`@media` (min-width: 72rem) {
.feature-grid.columns-3 {
grid-template-columns: repeat(3, minmax(20rem, 1fr));
}
}
/* Option B: use auto-fit with smaller minimum */
`@media` (min-width: 50rem) {
.feature-grid.columns-3 {
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
}View Detailed Test Results by Device
Mobile Devices
| Device | Viewport | Overflow | Mobile Menu | Main Content | Status |
|---|---|---|---|---|---|
| iPhone 12 | 390×844 | ✅ None | ✅ Present | ✅ Visible | 🟢 Pass |
| iPhone 12 Pro Max | 428×926 | ✅ None | ✅ Present | ✅ Visible | 🟢 Pass |
| Pixel 5 | 393×851 | ✅ None | ✅ Present | ✅ Visible | 🟢 Pass |
| Galaxy S21 | 360×800 | ✅ None | ✅ Present | ✅ Visible | 🟢 Pass |
All mobile devices: correct single-column layout, hamburger menu present, no horizontal overflow.
Tablet Devices
| Device | Viewport | Overflow | Status | Notes |
|---|---|---|---|---|
| iPad | 768×1024 | ✅ None | 🟢 Pass | |
| iPad Pro 11 | 834×1194 | 🟡 Warning | 3-col feature grid overflows content area | |
| iPad Pro 12.9 | 1024×1366 | ✅ None | 🟢 Pass | Grid fits at this width |
iPad Pro 11 detail: The .feature-grid.columns-3 container is 760px wide with gridTemplateColumns: "320px 320px 320px". Cards 1 & 2 in each row are fully visible; card 3 starts at x=712 and is clipped at x=834 (viewport edge), with 198px hidden.
Desktop Devices
| Device | Viewport | Overflow | Sidebar | Status |
|---|---|---|---|---|
| HD | 1366×768 | ✅ None | ✅ Visible | 🟢 Pass |
| FHD | 1920×1080 | ✅ None | ✅ Visible | 🟢 Pass |
| 4K | 2560×1440 | ✅ None | ✅ Visible | 🟢 Pass |
View Accessibility Findings
Tested on homepage at 390×844 (iPhone 12):
| Check | Result |
|---|---|
Images with alt attribute |
✅ All images have alt text |
| Buttons with accessible label | ✅ All buttons labeled |
Single <h1> per page |
✅ Exactly 1 H1: "GitHub Agentic Workflows" |
lang attribute on <html> |
✅ lang="en" |
<main> landmark |
✅ Present |
| Skip navigation link | |
| Search functionality | ✅ Present |
Minor: No skip-to-main-content link detected. Adding one improves keyboard and screen reader navigation (WCAG 2.4.1 — Bypass Blocks, Level A).
Recommendations
-
Fix
.feature-grid.columns-3breakpoint indocs/src/components/FeatureGrid.astro— raise themin-widththreshold from50remto at least72rem, or switch toauto-fitwithminmax(min(20rem, 100%), 1fr)so columns collapse gracefully. The same fix should be applied tocolumns-4which would overflow even sooner. -
Add a skip navigation link — add a visually-hidden
<a href="#main-content">Skip to main content</a>at the top of the page layout for WCAG 2.4.1 compliance.
References:
Generated by Multi-Device Docs Tester · ◷
- expires on Mar 25, 2026, 2:52 AM UTC