Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#652 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
playwright, typescript
Área
documentation, testing

Línea de trabajo

Lee la skill de help-pages y docs/writing-help.md; después, inspecciona tests/e2e/help/close-or-reopen-a-signup.spec.ts y las Screenshot dimensions del artículo. Captura what-people-see.png a 390px con pnpm help:screenshots, actualiza las dimensiones mostradas y comprueba el texto alternativo. Ejecuta la prueba del tamaño del artículo y los help walkthroughs. El trabajo estará terminado cuando la imagen se muestre a tamaño completo en un teléfono de 390px y pasen las comprobaciones especificadas.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
19
Forks
4
Merge medio
20 h 9 min
PR fusionados (30 d)
156

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de richshaw/OpenSignup

Todos los issues de richshaw/OpenSignup

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.