[hszzt]

Problem

On wide screens, the expanded problem list is constrained to Step 1, creating a long single-column list while space below the other panels remains unused.

Implementation

Keep the picker controls in Step 1 and display fixed-width problem cards below the setup panels. Cards wrap as space changes and return inside Step 1 on narrow screens.

An L-shaped container visually connects the controls and cards. The reading and keyboard navigation order is Step 1 controls, problem cards, Step 2, then Step 3. Filtering, selection, source-title visibility, and collapse behavior are preserved.

Design for review

This differs from the proposed approach of moving the entire details.problem-picker below the setup panels. This PR presents the alternative layout for review.

Screenshots

Collapsed

The problem picker is collapsed inside Step 1.

Expanded — wide window

Four fixed-width cards per row, with an L-shaped container connecting Step 1 to the cards below the setup panels.

Expanded — medium-width window

Cards wrap into three columns as the window narrows.

Expanded — narrow window

Cards return inside Step 1 and fit two per row at this width.

Validation

Ran ./scripts/test.sh after the review fixes. All 1,316 browser tests passed. The run skipped checks requiring unavailable tools and one Linux-specific Python test; these skips were reviewed.

Closes #394

---

Summary by cubic

The expanded problem picker now uses the space below the setup panels instead of confining problem cards to a long single column in Step 1. Picker controls stay in Step 1 while fixed-width problem cards wrap below the setup panels on wide screens and return inside the picker on narrow ones; the cards stay in the DOM so reading order, focus, and screen-reader behavior are unchanged.

• An L-shaped SVG outline visually connects the controls and cards; a MutationObserver updates cards and outline before paint, and a resize-and-event fallback keeps the outline in place when ResizeObserver is missing or content below grows.
• Filtering, selection, source-title visibility, and collapse behavior are preserved; closing the picker returns focus to its summary. Collapsed cards remain searchable via hidden="until-found" and fragment links reveal them by opening the picker.

^{Written for commit 3a5dad1. Summary will update on new commits.}

[hszzt]

Also addressed the three AI review findings in 983d6b6: added a ResizeObserver fallback, restored compact laptop spacing, and restored the mobile select font size to 16px.

[jserv]

Rebase latest main branch and resolve conflicts.

[hszzt]

Rebased onto main at 3198a99 and resolved the test conflict, preserving both sets of tests. Ran ./scripts/test.sh: all 1,367 browser tests passed; skipped checks were reviewed.

[jserv]

Rebase the current branch onto the upstream default branch and rework the series into functionally minimal commits, folding similar ones and enforcing the project's commit message rules.

[hszzt]

Rebased onto the latest upstream main and folded the four commits into one functional commit, a7008eb. The final file contents are unchanged, and the commit message passes the project hook.

[hszzt]

Addressed the four review comments in 7088b33: added meaningful breakpoint assertions, removed the incomplete ResizeObserver fallback, restored findability of collapsed cards with automatic expansion, and corrected the compact-spacing breakpoint to 640px. Folded the fixes into the existing commit. Ran ./scripts/test.sh: all 1,370 browser tests passed; skipped checks were reviewed.

[jserv]

Thank @hszzt for contributing!