squint: a report you can actually read

Three things made the old one hard to use, and the fix for each was a
different kind of wrong.

Thirty-four shots on one page, twenty-eight of which had not changed, and
every one of them fetching its screenshot: about seven megabytes to say
"nothing happened here" twenty-eight times. Anything that did not move is a
collapsed row now, so the browser never fetches it and the six that matter
are not buried under it.

One layout for two shapes. A 1280-wide desktop page in a third of the
screen is unreadable and a 390x1308 phone page is taller than the screen it
is being read on, so the report now knows each rendering's size and lays it
out accordingly: a desktop shot gets a row to itself, phone shots sit side
by side.

And scaling to fit, which was the actual complaint. A phone page shrunk to
fit the viewport rendered about 197 pixels wide -- half size, nothing on it
legible. Panes show the page at one to one and scroll instead; a swipe is
cheaper than a screenshot you cannot read.

The before and after panes are also gone, replaced by one slot that flips
between them -- two images side by side are hard to compare, the same
position swapped is not, and the eye finds what moved immediately. It is a
hidden checkbox and two sibling figures, so it works whatever the two sizes
are, which a slider would not.

Every image links to itself, so clicking one opens it full size.

Checked in both themes by screenshotting the report with the same headless
Chrome the tool drives, which found that the first attempt at the flip put
a 1200px image inside an inline-flex pill and drew a giant ellipse around
the page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X1aAjLD4wvan3wsmkHPPh3
James Millscommitted parent 0782a5579152e83144d17d2c71f04338aa6923b8baa8496Browse files
2 files changed+123−23

Rendering diff…