🔍 Multi-Device Docs Testing Report - 2026-03-18

[github-actions]

Test Summary

• Triggered by: @pelikhan
• Workflow run: §23226379507
• Test date: 2026-03-18
• Method: Static code analysis (live Playwright browser tests blocked by sandbox network firewall — browser container could not reach agent container at 172.30.0.20:4321)

Results Overview

• 🟢 Passed: 8 design/accessibility areas
• 🟡 Warnings: 4 potential issues
• 🔴 Critical: 1 issue requiring attention

Critical Issues

1. Header Navigation Overflow on Tablets (768–900px)

The custom header contains 7 navigation links (Quick Start, Create, Examples, Docs, FAQ, Blog, Peli's Agent Factory). While mitigations exist (reduced font size to 0.8125rem, gap to 0.5rem, padding to 0.25rem 0.5rem), the combined width of 7 links on iPad Pro 11" (834×1194) is likely to overflow or wrap awkwardly without a mobile-hamburger fallback at this breakpoint.

Relevant file: src/styles/custom.css — @media (min-width: 768px) and (max-width: 900px) block

Recommendation: Add a hamburger/dropdown menu for the 768–900px range, or reduce visible links using display: none on lower-priority items.

---

Warnings

View All Warnings

⚠️ W1 — Light Theme Animation Performance on Mobile

light-glow-move uses large fixed radial gradients with continuous animation. This is not disabled on mobile devices and may cause jank/battery drain on low-end phones.

File: src/styles/custom.css

⚠️ W2 — Mermaid Diagram Overflow on Mobile

Complex Mermaid diagrams use overflow-x: auto but no max-width constraint. Diagrams with many nodes may require significant horizontal scrolling on phone viewports (390–428px wide).

⚠️ W3 — Long Code Block Lines on Mobile

pre-wrap is applied on mobile (≤768px) but long unbroken strings (e.g., URLs, shell commands with no spaces) still overflow. No word-break: break-all fallback exists.

⚠️ W4 — Markdown Content Touch Targets

Links rendered from Markdown content do not have enforced 44×44px minimum touch targets (only custom components like sidebar links, CopyButton, and ThemeToggle enforce this). Inline body links on mobile may be too small for comfortable tapping.

---

View Detailed Test Results by Device

Note: Live Playwright browser tests could not be executed due to the sandbox network firewall preventing the Playwright container from accessing the agent container's bridge IP (172.30.0.20:4321). The following is based on static analysis of source code.

Mobile Devices (390–428px)

Area	Status	Notes
Overflow prevention	🟢	overflow-x: hidden on html/body, max-width: 100% on media
Navigation sidebar	🟢	Starlight hides sidebar on mobile, hamburger provided by framework
Touch targets	🟡	Custom components 44px ✅, markdown links not enforced ⚠️
Code blocks	🟡	pre-wrap applied but long unbroken strings still overflow
Animations	🟡	Light theme glow animation not disabled on mobile
Accessibility (ARIA)	🟢	Skip-to-content, aria-live for search, semantic nav
Responsive tables	🟢	ResponsiveTable.astro converts to stacked cards at 640px
Feature grid	🟢	Single column on mobile via CSS grid

Tablet Devices (768–1024px)

Area	Status	Notes
Header nav overflow	🔴	7 links may overflow at 768–900px range
Sidebar	🟢	Visible at ≥769px per Starlight default
Responsive tables	🟢	Full table layout at this breakpoint
Feature grid	🟢	2-column layout at 800px+
Touch targets	🟢	44px enforced in custom components

Desktop Devices (1366–2560px)

Area	Status	Notes
Layout	🟢	Full sidebar + TOC layout, no overflow concerns
Navigation	🟢	All 7 header links comfortable at these widths
Typography	🟢	clamp() fluid sizing scales appropriately
Code blocks	🟢	Full pre-formatted display

---

Accessibility Findings

Strengths (🟢):

• Semantic HTML with (nav aria-label="Primary navigation")
• aria-live="polite" dynamically injected for search results (via search-aria.ts)
• prefers-reduced-motion respected in animations
• Minimum 44×44px touch targets on custom interactive components
• Skip-to-content link with proper focus styling
• Error modal with role="dialog", aria-modal, aria-labelledby
• Decorative elements properly marked aria-hidden="true"

Gap:

• Color contrast ratios for gray text (#8d96a0 on dark, #656d76 on light) are not documented. These should be validated against WCAG AA (4.5:1 for normal text).

Recommendations

1. [High] Add responsive hamburger/dropdown for header links at 768–900px range to fix tablet overflow
2. [Medium] Add @media (max-width: 768px) { .light-glow-move { animation: none; } } to disable heavy animations on mobile
3. [Medium] Add word-break: break-word to pre and code blocks on mobile to handle unbroken long strings
4. [Low] Validate gray text color contrast ratios against WCAG AA using a tool like axe or Lighthouse
5. [Low] Consider enforcing minimum touch target sizes for links in rendered Markdown content

References:

• §23226379507

Generated by Multi-Device Docs Tester · ◷

• expires on Mar 20, 2026, 2:42 AM UTC