Skip to content

The "what people see" picture on the Close or reopen a signup help page is too small to read on a phone #652

Closed

Description

@richshaw

Needs your OK: this re-takes one picture on the help page "Close or reopen a signup" at phone width. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

  • The picture is taken on a computer. public/help/close-or-reopen-a-signup/what-people-see.png shows the public page of a closed signup. The walkthrough captures it on a computer, so the file is 1408×680 and the article shows it at 704×340.
  • A phone shrinks it too far. On a 390px phone the page scales it to 356px wide, about half its width in CSS pixels. "This signup is no longer collecting responses." and each slot's Closed come out about 7px tall.
  • The other two pictures read fine. They show at about full size on a phone.
  • Phones are where people read it. In the UX walkthrough on Add a help page on closing and reopening a signup #610, people mostly opened this page on a phone.

Fix, in outline

  • Open the visitor's page at phone size for this picture. In tests/e2e/help/close-or-reopen-a-signup.spec.ts, open it with browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 }) and take what-people-see there.
  • Re-take the pictures with pnpm help:screenshots.
  • Update the article's size. Set its <Screenshot width height> to half the new file's size.
  • Check the alt text still says what the picture shows.

Watch for

  • src/help/articles.test.tsx checks every picture's real size against the article.
  • The walkthrough's other checks on that page must still pass at the new size: Closed on each slot that isn't full, and no Sign up.
  • Overlap with The three help walkthroughs each have their own copy of shot() #651, which moves shot() out of the same spec. Whichever lands second has a small merge.
  • The help-pages skill and docs/writing-help.md say how pictures are taken and sized.
  • CHANGELOG: add a line under Unreleased › Changed.

Choices this makes

  • Phone width. On a computer the picture then shows at its real size, about 360px wide, narrower than the text column. It still shows the whole page people see.
  • Only this picture. The other two read fine on a phone.

Done when

  • what-people-see.png is captured at 390px wide, and on a 390px phone it shows at its real size, not scaled down.
  • articles.test.tsx and the help walkthroughs pass.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

From the UX walkthrough comment on #610 (#610 (comment)). Checked against the article and its walkthrough on main at 1d4ff3a. https://claude.ai/code/session_01LrYa57fvbqWjZj89iH975K

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions