Verify AI‑Written UI Changes by Rendering at a Mobile Width (360–390px) and Asserting Element Geometry

# What the experiment tested TestMu AI ran 10 AI‑written UI components across six viewports on real Chrome and Microsoft Edge. The goal: find whether a single agent self‑check at its default viewport misses defects that appear on narrower screens.

# How the test was set up Components were simple, commonly requested UI pieces (pricing row, nav bar, deployment history table, confirmation modal, settings form, KPI tiles, sidebar dashboard, feature card grid, filter toolbar, page header). For each component the team took the AI agent's first output without iteration—mirroring how agent work commonly arrives in pull requests.

Viewports used: 1280x720 (baseline), 1920x1080, 1440x900, 768x1024, 390x844, and 360x800. Browsers: latest Chrome and Microsoft Edge on Windows 11. Scale: 10 components × 6 viewports × 2 browsers = 120 measured renders.

Each render ran five objective checks: horizontal page overflow (scrollWidth > viewport width), elements whose right edge falls outside the viewport, content clipped by an overflow‑hiding ancestor, interactive elements smaller than 44×44 CSS pixels (applied only to mobile widths), and sibling elements whose bounding boxes intersect.

# What the results showed

The failure modes included off‑screen elements, clipped content due to overflow rules, sibling overlap, and touch targets under the WCAG 2.5.5 44×44 CSS pixel threshold. Three components had no horizontal overflow yet still failed the touch target check.

# What explains the gap AI coding agents that verify their own work tend to open a single browser at a default viewport. Playwright's default is 1280×720, a comfortable desktop width. That default becomes an implicit, unexamined test size. Any narrower widths are untested by construction, so mobile problems slip through.

# Practical verification steps

• Render the AI‑written change at a mobile width between 360px and 390px before merge. This single render exposed all mobile defects in the study.
• Make assertions on element geometry: measure each element's bounding box (x, y, width, height) and check containment in the viewport and minimum touch size constraints.
• Store the mobile rendering as a baseline (per browser, per viewport). Use that baseline to fail future builds that diverge visually or geometrically.

# Tools mentioned in the study

# Short conclusion If an AI agent verifies at one default desktop width, render and assert the change at a narrow mobile width before merging and keep that render as a baseline. That single step catches layout, clipping, overlap, and touch target failures the agent's default check misses.