Skip to content

🔍 Multi-Device Docs Testing Report - 2026-04-22 #27823

@github-actions

Description

@github-actions

Test Summary

  • Triggered by: @pelikhan
  • Workflow run: §24777457542
  • Devices tested: 10 (4 mobile, 3 tablet, 3 desktop)
  • Test date: 2026-04-22

Results Overview

  • 🟢 Passed: 6 (all tablets + all desktops)
  • 🟡 Warnings: 4 (all mobile devices)
  • 🔴 Critical: 0

Critical Issues

None. All devices render the page correctly with working navigation and no broken layouts.

Mobile Warning: Code Block Horizontal Overflow

All 4 mobile viewports (360–428px wide) show a code block overflow issue on the landing page:

  • The Expressive Code YAML workflow example block contains lines whose rendered width reaches ~554px (white-space: pre)
  • body.scrollWidth (554px) exceeds body.clientWidth (344–412px) on all mobile viewports
  • body, html { overflow-x: hidden } clips the overflow — no horizontal scrollbar appears, so mobile users cannot scroll to see truncated content
  • The <pre> element has overflow-x: auto via EC CSS, but the body-level hidden overflow suppresses this at narrow viewports
  • Breakpoint: overflow resolves at ~600px viewport width (550px overflows, 600px does not)
View Detailed Results by Device

Mobile Devices

Device Viewport Status Issue
iPhone 12 390×844 🟡 Warning Code block clipped at ~554px content width
iPhone 12 Pro Max 428×926 🟡 Warning Code block clipped at ~554px content width
Pixel 5 393×851 🟡 Warning Code block clipped at ~554px content width
Galaxy S21 360×800 🟡 Warning Code block clipped at ~554px content width

Tablet Devices

Device Viewport Status
iPad 768×1024 🟢 Passed
iPad Pro 11 834×1194 🟢 Passed
iPad Pro 12.9 1024×1366 🟢 Passed

Desktop Devices

Device Viewport Status
HD 1366×768 🟢 Passed
FHD 1920×1080 🟢 Passed
4K 2560×1440 🟢 Passed

All devices share these passing findings:

  • title = "Home | GitHub Agentic Workflows"
  • <main> landmark present ✅
  • <nav> present ✅
  • Skip link present ✅
  • Single H1 ✅
  • No images missing alt
  • lang="en", dir="ltr"

Accessibility Findings

All accessibility checks passed:

  • Skip link: <a href="#_top" class="skip-link">Skip to main content</a> — WCAG 2.4.1 ✅
  • Landmarks: <main>, <header>, <nav>, <footer> all present ✅
  • Heading hierarchy: H1 → H2 → H3, no skipped levels ✅
  • Images: All have alt attributes (logo: alt="GitHub Agentic Workflows") ✅
  • Navigation: Both <nav> elements have aria-label="Primary navigation"
  • Mobile hamburger: aria-label="Toggle navigation menu", aria-expanded="false"
  • Search button: aria-label="Search", aria-keyshortcuts="Control+K"
  • Videos: Both <video> elements have title, aria-label, and native controls
  • Theme: prefers-color-scheme supported; default dark theme with JS switcher ✅
  • Active page: aria-current="page" used for navigation state ✅

Recommendations

  1. Fix mobile code block overflow — The landing page YAML example is clipped on all mobile viewports < ~560px. Options:
    • Add overflow-x: auto (not hidden) on the code block's container at mobile breakpoints, or
    • Shorten the longest YAML lines in the example to fit within ~360px rendered width, or
    • Add a media query to allow horizontal scroll within the code block wrapper while keeping page-level overflow hidden

References:

Generated by Multi-Device Docs Tester · ● 994.6K ·

  • expires on Apr 24, 2026, 12:31 PM UTC

Metadata

Metadata

Labels

cookieIssue Monster Loves Cookies!documentationImprovements or additions to documentationtesting

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions