[richshaw]

Fixes #652.

The problem

The "what people see" picture on the help page "Close or reopen a signup" was taken on a computer (1408×680, shown at 704×340). On a 390px phone the page scaled it down to about 356px wide, so "This signup is no longer collecting responses." and each slot's Closed came out about 7px tall. Most people read this article on a phone.

The fix

• tests/e2e/help/close-or-reopen-a-signup.spec.ts: the visitor's page for that picture now opens at 390×844 (still deviceScaleFactor: 2). The walkthrough's checks on that page (Closed at the top, Closed on both slots, no Sign up) run at that size too.
• Re-took the pictures with the walkthrough (HELP_SCREENSHOTS=1). Only what-people-see.png changed. It's now 780×742, and the article shows it at 390×371.
• The alt text still matches the picture: Closed at the top with "no longer collecting responses", and Closed on Fruit and water and Orange slices. I left it as it was.
• CHANGELOG line under Unreleased › Changed.

At phone width the signup's title wraps to two lines, so the picture is taller than before. On a computer it shows at about 390px wide, narrower than the text column, as the issue expected.

Tests

• HELP_SCREENSHOTS=1 pnpm exec playwright test -c .claude/skills/run-opensignup/playwright.container.config.ts tests/e2e/help/close-or-reopen-a-signup.spec.ts --project=chromium against a production build: 2 passed (computer and phone).
• pnpm lint && pnpm typecheck && pnpm knip && pnpm test: all pass (2021 tests, including src/help/articles.test.tsx, which checks the picture's real size against the article).

---

Generated by Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

[richshaw]

CI is green on 18b761e (lint-type-test, e2e, CodeQL), so this goes to tophat.

Correction: the Claude-Session: link in commit 18b761e's message is mistyped. The build session is https://claude.ai/code/session_016YZ9SSmBJ1FLQ5WPZBo9eD.

---

Generated by Claude Code

[richshaw]

Tophat: passed

I ran 18b761e locally with pnpm dev, Postgres 16, and Chromium at 1280×900 and 390×844. The worker wasn't needed: only a help page and its picture change. For "before", I put the base commit's picture and article back on the same server and took the same shots.

Check	Result	What I saw
Phone (390px): the picture is readable	✅	Before, the 1408×680 picture drew at 356×172, about half size, and its text was hard to read. After, the 780×742 picture draws at 356×339. "This signup is no longer collecting responses." and each Closed are clear (730-before-phone-picture vs 730-after-phone-picture).
Desktop (1280px): it shows at its intended size	✅	It draws at 390×371, as width/height say. It's narrower than the text column, as #652 expected (730-after-desktop-picture). Before, it drew at 670×324.
The picture's real size matches the article's width/height	✅	naturalWidth × naturalHeight is 780×742, twice 390×371. src/help/articles.test.tsx passes (41 tests).
The alt text still matches the picture	✅	Closed at the top with "no longer collecting responses", then Closed on Fruit and water and on Orange slices. All are in the picture.
The page itself on a phone	✅	There's no sideways scroll (scrollWidth 390) and no console errors (730-after-phone-page).
The walkthrough that takes the picture	✅	It runs in CI's e2e job, which is green on 18b761e. I didn't rerun it here.

For the owner (UX): the help page "Close or reopen a signup" now shows what people see on a closed signup the way a phone shows it. At phone width the signup's title wraps to two lines, so the picture is taller. On a computer it's about 390px wide instead of filling the column. To compare, see 730-before-phone-picture and 730-after-phone-picture, and 730-before-desktop-picture and 730-after-desktop-picture.

Screenshots are in https://claude.ai/code/session_016YZ9STezWbCwraoLkr1hSJ.

---

Generated by Claude Code

[richshaw]

Review: passed (round 1)

The PR re-takes the "what people see" picture on the help page "Close or reopen a signup" at phone width, as #652 asks. The walkthrough opens the visitor's page at 390×844 with deviceScaleFactor: 2, and the article's <Screenshot> is now 390×371, half the new 780×742 file. I opened the committed picture: it shows the Closed box with "This signup is no longer collecting responses.", the title, and Closed on Fruit and water and Orange slices, so the alt text still matches. The walkthrough's checks on that page (Closed at the top, Closed on both slots, no Sign up) now run at phone size and pass in CI. Every "Fix, in outline" and "Done when" item in #652 is done, and the CHANGELOG line is under Unreleased › Changed.

Blocking (0): none
Optional (0): none
Earlier threads: none. Copilot couldn't review because the review quota was used up.
Checks: CI is green on 18b761e (lint-type-test, e2e, CodeQL). The tophat passed on this same SHA. I didn't need to run anything locally: the diff is one spec, one article's width and height, a PNG and the CHANGELOG, and src/help/articles.test.tsx checks the picture's size in CI.

For the owner (UX): this changes a help page picture. On a phone it is now readable at full size. On a computer it shows about 390px wide, narrower than the text column, and taller because the title wraps. Compare the tophat's 730-before-phone-picture with 730-after-phone-picture, and 730-before-desktop-picture with 730-after-desktop-picture.

Session: https://claude.ai/code/session_016YZ9SW5JHz4c4y9KsELbN5

---

Generated by Claude Code