Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Use the full lobby width for the expanded problem picker

Đang mở
  • Có gì không ổn?
#394 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, html, javascript, python, rust
Lĩnh vực
frontend, testing, web-dev

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
Rust
Star
177
Fork
100
Merge trung bình
1 ngày 13 giờ
Pull request đã merge (30 ngày)
138

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của sysprog21/codetrial

Tất cả issue của sysprog21/codetrial

Issue tương tự

Thêm issue về Rust

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.