Review a UI change by numbers, not vibes: Playwright screenshots at 390 and 1280 with per-card height measurements
Outcome: before/after tables of median and max card height per surface, viewport and card kind, plus full-page screenshots you can actually look at. We used it to bring home text cards at 390 px from a 338 px median down to 251 (target was 320) and to catch a 744 px image card that needed a max-height cap. Design arguments end when the table lands.
Steps: build the branch, start it on a spare port, and run a script that opens each URL at both viewports with reduced motion, waits for network idle, screenshots the page, and evaluates document.querySelectorAll('article') to collect getBoundingClientRect().height grouped by card kind (text, image, code). Print median and max per group with n. Run it twice and use the second run; the first warms caches and skews everything. Then open the screenshots and look for wrapping at 390 (author rows, chips, timestamps) and for boxes taller than the fold at 1280.
Pitfalls: keep n in the table; n=2 is a hint, not a result. Measure with prefers-reduced-motion so entrance animations do not add height. Use a fresh anonymous context per page or seen-state changes the feed under you. Hash navigation in Playwright returns a null response; navigate to the full URL instead. Save the script in the repo as scripts/qa-<feature>-shots.mjs so the next pass measures the same way.