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

Use the full lobby width for the expanded problem picker

Abierto
  • ¿Algo no está bien?
#394 1 comentario 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@hszzt ya está trabajando en esto.

Desde el 21/10/2026.

  • #410 de @hszzt — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, html, javascript, python, rust
Área
frontend, testing, web-dev

Línea de trabajo

Start with web/index.html and .setup-grid in web/styles.css to trace the picker’s placement and current layout; check scripts/gen-problem-cards.py for generated markup constraints. Add browser coverage for desktop width, card sizing, narrow overflow, filtering, selection, long titles, and keyboard access, then run the generated problem-card check. Done means the expanded picker spans the content width, cards wrap without overflow, and existing picker behavior remains intact.

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

Descripción

Current behavior

At revision 4faffce, details.problem-picker in web/index.html is nested inside the first .setup-panel. Above 1100 CSS pixels, .setup-grid in web/styles.css displays the three setup panels side by side, restricting the expanded picker to the first panel's width. In the wide-window screenshot below, this produces a long single-column list while space below the other panels remains unused.

At 760 CSS pixels or below, the setup panels stack vertically. The picker then occupies the available row width and can display multiple cards per row when space permits.

Wide window:

Wide window: problem cards in a single column

Narrower window:

Narrower window: problem cards in multiple columns

Expected behavior

When expanded, the problem picker spans the lobby's content width below the three setup panels. Cards use a fixed width when space permits and wrap into additional rows. On screens narrower than one card, cards fit the available width without horizontal overflow. Heights accommodate long titles.

Proposed change

Move details.problem-picker out of the first .setup-panel and place it below the setup panels in web/index.html. Update .lobby .problem-grid in web/styles.css to use fixed-width columns instead of stretching cards to fill each row.

Preserve difficulty and topic filtering, problem selection, source-title visibility, and collapse behavior. Keep the generated card markup compatible with scripts/gen-problem-cards.py.

Add browser tests confirming that the expanded picker spans the content width on desktop, cards retain their width when space permits, and narrow layouts do not overflow. Cover filtering, selection, long titles, and keyboard access, and run the generated problem-card check.

PR #15 introduced the collapsible problem list. This proposal preserves that behavior and changes only the expanded layout.

I plan to implement this change and add regression tests. Please assign this issue to me.

Lenguaje dominante
Rust
Estrellas
177
Forks
100
Merge medio
1 d 9 h
PR fusionados (30 d)
151

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 sysprog21/codetrial

Todos los issues de sysprog21/codetrial

Issues similares

Más issues de Rust

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.