Repository navigation
Let the selected problem wrap below the button - #249
Merged
Merged
Conversation
ColtenOuO
reviewed
Oct 7, 2026
The recommendation sat in whatever grid column the button left over, which on a phone is narrower than one word of a title, so the line broke after nearly every word and, below 360px, pushed the lobby wider than the window. A wrapping row keeps it beside the button wherever it gets a readable width, the one-row layout sysprog21#103 chose to keep the lobby on one screen, and moves it below the button only when it cannot fit.
YunJ-Chang
force-pushed
the
lobby-recommendation-wrap
branch
from
October 7, 2026 11:07
07fa077 to
efb9622
Compare
ColtenOuO
approved these changes
Oct 7, 2026
Contributor
|
Thank @YunJ-Chang for contributing! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The recommendation sat in whatever grid column the button left over, which on a phone is narrower than one word of a title, so the line broke after nearly every word and, below 360px, pushed the lobby wider than the window.
.random-pickeris now a wrapping flex row withflex: 1 1 12remon the recommendation: the line keeps the button's row wherever it gets a readable width, the one-row layout #103 chose to keep the lobby on one screen, and moves below the button only when it cannot fit.Checked in Chromium 153 at 320px, 375px and 1280px with the three titles from #240 (Rooftop Panel Footprint, Log Timestamp Span, Playlist Segment Flip; the issue misnames the second as "Log Time Span").
document.documentElement.scrollWidthnow equals the viewport width in all nine cases; before this change it was 369, 379 and 360 at 320px, and 379 for Log Timestamp Span at 375px. The line sits below the button at 320px and 375px, and beside it at 1280px, where the lobby looks the same as before.The new lobby test selects Log Timestamp Span and checks both ends: at 320px the page does not scroll sideways and the line sits below the button, and at 1280px it stays beside it. Against the old grid it fails with "the lobby scrolls sideways at 320px".
./scripts/test.shpasses; it skipped only the Java browser test, cargo-audit and actionlint.Before (320px):

After (320px):

Closes #240
Summary by cubic
Fixes the lobby overflowing its viewport on phones by letting the selected problem wrap below the button when it cannot fit beside it.
The recommendation previously sat in a fixed grid column that shrank below one word of a title on narrow screens, breaking lines after nearly every word and pushing the page wider than the window below 360px. The random picker is now a wrapping flex row; the line stays beside the button on wide screens and drops below it on phones. Adds a browser test covering both layouts at 320px, 375px, and 1280px. Closes #240.
Written for commit efb9622. Summary will update on new commits.