← All build notes Engineering

Checking UI at five widths before every release

Before a release we check the interface at 320, 390, 768, 1024 and 1440 px. Here is a headless browser setup that captures every width.

ArcLayer teamBuild notesNov 2, 20263 min read

UI built by an agent usually looks right at the width it was tried at. We check every release at 320, 390, 768, 1024 and 1440 px, because the bugs show up at the other widths, such as a navigation bar that wraps at 390 px or a table that pushes the whole page sideways at 320 px.

Why these five

320 px: small phones, and the width where horizontal overflow appears first.
390 px: a common width for current iPhones.
768 px: a tablet held upright, where many layouts move from one column to two.
1024 px: a tablet on its side, or a small laptop.
1440 px: a typical desktop, where line length and empty space need a look.

Capture every width in one script

Playwright can drive a headless browser and take a screenshot at each width. This script uses the installed Microsoft Edge and captures every page in a list at all five widths:

js

// capture.mjs: screenshot each page at five widths
import { chromium } from 'playwright';

const widths = [320, 390, 768, 1024, 1440];
const paths = ['/', '/work', '/blog'];
const base = 'http://localhost:3000';

const browser = await chromium.launch({ channel: 'msedge' });
for (const width of widths) {
  const page = await browser.newPage({ viewport: { width, height: 900 } });
  for (const path of paths) {
    await page.goto(base + path, { waitUntil: 'networkidle' });
    const name = path === '/' ? 'home' : path.slice(1);
    await page.screenshot({ path: `shots/${name}-${width}.png`, fullPage: true });
  }
  await page.close();
}
await browser.close();

Run it with node capture.mjs against a local build. The output is one folder of images named by page and width, ready for a reviewer.

Fail the check on sideways scroll

Screenshots need a person to look at them, but horizontal overflow can be caught by the script. Inside the loop, compare the page width with the viewport:

js

const overflow = await page.evaluate(
  () => document.documentElement.scrollWidth > window.innerWidth
);
if (overflow) throw new Error(`${path} scrolls sideways at ${width}px`);

What a person still checks

The script finds overflow. It cannot judge whether a heading breaks in an awkward place, whether a tap target is too small at 320 px or whether the 1440 px layout feels empty. A reviewer opens the screenshots for each width and checks those by eye before the release goes out.