Skip to content

Let the selected problem wrap below the button - #249

Merged
jserv merged 1 commit into
sysprog21:mainfrom
YunJ-Chang:lobby-recommendation-wrap
Oct 7, 2026
Merged

jserv merged 1 commit into
sysprog21:mainfrom
YunJ-Chang:lobby-recommendation-wrap

Conversation

@YunJ-Chang

@YunJ-Chang YunJ-Chang commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

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-picker is now a wrapping flex row with flex: 1 1 12rem on 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.scrollWidth now 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.sh passes; it skipped only the Java browser test, cargo-audit and actionlint.

Before (320px):
240-before-320-log-timestamp-span

After (320px):
240-after-320-log-timestamp-span

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.

Review in cubic

cubic-dev-ai[bot]

This comment was marked as resolved.

@jserv
jserv requested review from ColtenOuO and alanhc October 7, 2026 04:06
Comment thread web/styles.css Outdated
Comment thread tests/browser/lobby.test.js Outdated
Comment thread tests/browser/lobby.test.js
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
YunJ-Chang force-pushed the lobby-recommendation-wrap branch from 07fa077 to efb9622 Compare October 7, 2026 11:07
@ColtenOuO
ColtenOuO requested a review from jserv October 7, 2026 20:05
@jserv
jserv merged commit a77b0db into sysprog21:main Oct 7, 2026
6 checks passed
@jserv

jserv commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

Thank @YunJ-Chang for contributing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Selected problem line is squeezed on narrow screens and overflows the lobby below 360px

3 participants