Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Use the full lobby width for the expanded problem picker

Chiusa
  • Qualcosa non va?
#394 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@hszzt ci sta già lavorando.

Dal 21/10/2026.

  • #410 di @hszzt — integrata

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, html, javascript, python, rust
Ambito
frontend, testing, web-dev

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
Rust
Stelle
177
Fork
100
Merge medio
1g 11h
PR unite (30g)
182

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di sysprog21/codetrial

Tutte le issue di sysprog21/codetrial

Issue simili

Altre issue su Rust

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.