---

date: 2026-06-23 tags: [vrt, playwright, storybook, screenshots] status: active graduated_to:

Playwright fullPage floors at the viewport height — short stories capture with dead space

Symptom — mobile VRT shots of small components came out the full phone height (e.g. a 112px logo in an 867px frame), mostly empty. Wide components (the week strip) were clipped on the right.

Root cause — two things compounded. Storybook's layout: 'centered' puts each story in a min-height: 100vh body (the component is vertically centred), and Playwright's fullPage screenshot never crops below the viewport height (it captures max(content, viewport)). So a short story is padded to the full viewport. Separately, a component wider than the viewport overflows it horizontally, which a fixed-viewport (non-fullPage) shot clips.

Fix — in scripts/vrt-capture.mjs:130-162 (PR #726): measure each story's real rendered height (#storybook-root bounding rect) and shrink the viewport height to it before a fullPage shot. Width is left alone, so the responsive layout is untouched and fullPage still captures any horizontal overflow.

const contentHeight = await page.evaluate(() =>
    Math.ceil(document.querySelector('#storybook-root').getBoundingClientRect().height),
);
await page.setViewportSize({ width: viewport.width, height: Math.max(contentHeight, 1) });
await page.screenshot({ path, fullPage: true });

Guard — the measure-then-resize block in vrt-capture.mjs. Element-screenshot (locator('#storybook-root').screenshot()) was the obvious alternative but clips horizontal overflow, so it's the wrong fix; the viewport-resize keeps width intact.