Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Use the full lobby width for the expanded problem picker

Closed
  • Is something wrong?
#394 1 comment 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@hszzt is already working on this.

Since Oct 21, 2026.

  • #410 by @hszzt — merged

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
css, html, javascript, python, rust
Domain
frontend, testing, web-dev

Research direction

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.

Written by the indexing model from the issue text.

Description

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.

Dominant language
Rust
Stars
177
Forks
100
Avg merge
1d 11h
Merged PRs (30d)
182

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from sysprog21/codetrial

All issues in sysprog21/codetrial

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.