screenshot-verify

name	screenshot-verify
description	Verify Ultiorganizer UI and CSS changes by taking screenshots and measuring element layout using Chromium inside the dev Docker container. Use whenever a visual or layout change needs confirmation — responsive CSS, header alignment, table widths, mobile vs desktop rendering. Don't skip this just because the code looks right; run it to get actual pixel evidence.

Screenshot Verify

Takes screenshots and measures element dimensions using Chromium inside the dev container. The app is reachable at http://app/ within the container network.

Prerequisites

Dev container must be running:

docker compose -f docs/dev/compose.yaml --profile devtools up -d dev

Screenshots are saved to /workspace/ (the repo mount) so they are readable from the host via the Read tool.

Taking screenshots

Always run Chromium inside the container — the host snap build cannot write to /tmp/ and the host has no access to http://app/.

Use http://host.docker.internal:8080/ as the base URL — Chromium's DNS stack inside the container cannot resolve Docker service names like app, but host.docker.internal (mapped to the host gateway in compose.yaml) is stable across restarts.

docker compose -f docs/dev/compose.yaml exec -T dev \
  chromium --headless=new --no-sandbox --disable-gpu \
  --screenshot=/workspace/<output>.png \
  --window-size=<WIDTH>,<HEIGHT> \
  "http://host.docker.internal:8080/?view=<view>"

Read the resulting file with the Read tool to view it.

Standard viewport sizes

Scenario