Phone: the settings screen is wider than the screen #246

New issue

Closed

opened 2026-10-21 20:21:06 +00:00 by littlefox · 1 comment

littlefox commented

2026-10-21 20:21:06 +00:00

Owner

Found while adding the version line (#245). On iPhone (390 px) and Android (412 px), section.settings-screen has a scrollWidth of 686/680 px: every section is stretched to that width, so the screen scrolls sideways and the text runs off the right edge.

Cause: .settings is a grid with an automatic column, and a grid column is at least as wide as its widest item's min-content. The long selects ("Latin-1 när det går, annars UTF-8", the reading-order choice) set that width.

Fix: grid-template-columns: minmax(0, 1fr) and max-width: 100% on the selects; a spec checks there is no sideways scroll on phones.

Found while adding the version line (#245). On iPhone (390 px) and Android (412 px), `section.settings-screen` has a `scrollWidth` of 686/680 px: every section is stretched to that width, so the screen scrolls sideways and the text runs off the right edge. Cause: `.settings` is a grid with an automatic column, and a grid column is at least as wide as its widest item's min-content. The long `select`s ("Latin-1 när det går, annars UTF-8", the reading-order choice) set that width. Fix: `grid-template-columns: minmax(0, 1fr)` and `max-width: 100%` on the selects; a spec checks there is no sideways scroll on phones.

littlefox added this to the 0.6: Performance milestone

2026-10-21 20:21:07 +00:00

littlefox added the

area/ui

kind/bug

labels

2026-10-21 20:21:07 +00:00

littlefox referenced this issue from a pull request that will close it,

2026-10-21 20:27:04 +00:00

Show the version under Settings; fit settings on phones #247

littlefox referenced this issue from a commit

2026-10-21 20:27:04 +00:00

Fit the settings screen on phones

littlefox closed this issue

2026-10-21 21:45:30 +00:00

littlefox commented

2026-10-21 22:19:19 +00:00

Author

Owner

Merged in #247; main run #401 green. Verified: settings.spec now checks that the settings screen does not scroll sideways (scrollWidth ≤ clientWidth) on all three profiles; iPhone screenshots looked at.

Merged in #247; main run #401 green. Verified: `settings.spec` now checks that the settings screen does not scroll sideways (scrollWidth ≤ clientWidth) on all three profiles; iPhone screenshots looked at.