Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#652 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
playwright, typescript
領域
documentation, testing

調査の方向性

help-pages skillとdocs/writing-help.mdを読み、その後tests/e2e/help/close-or-reopen-a-signup.spec.tsと記事のScreenshot dimensionsを確認してください。pnpm help:screenshotsを使って390pxでwhat-people-see.pngをキャプチャし、表示される寸法を更新してalt textを確認してください。記事のサイズテストとhelp walkthroughsを実行してください。390pxのスマートフォンで画像が原寸表示され、指定されたチェックに合格したら完了です。

索引モデルが issue の本文から書いたものです。

説明

enhancement pipeline:proposed pipeline:ux

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 #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 #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 (https://github.com/richshaw/OpenSignup/pull/610#issuecomment-6402399737). Checked against the article and its walkthrough on main at 1d4ff3a. https://claude.ai/code/session_01LrYa57fvbqWjZj89iH975K

主要言語
TypeScript
スター
19
フォーク
4
平均マージ
19時間 34分
マージ済み PR（30日）
165

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。