[2.x] fix: complete the wide-screen breakpoints for the main layout - #4869
Merged
Conversation
The desktop-xl/xxl/xxxl breakpoints were introduced with the extension list UI, but the main .container was never updated to use them: every screen wider than 1100px rendered the same fixed width, leaving half the viewport unused on modern displays. The container now steps through the existing bands, and the desktop band widths are CSS custom properties so themes can retune each band from :root without re-declaring media queries. Wider containers must not mean longer text lines: from desktop-xl up the discussion post stream is capped (also a custom property), with the slack sitting between the prose and the scrubber sidebar.
imorland
added a commit
to flarum/docs
that referenced
this pull request
Jul 31, 2026
Companion to flarum/framework#4869, which completes the wide-screen breakpoint bands for the main layout and exposes the per-band container widths (and the discussion prose cap) as CSS custom properties.
imorland
added a commit
that referenced
this pull request
Aug 5, 2026
The desktop band widths introduced in #4869 are not tied to the breakpoints that open them: the hd band starts at 1100px but sets a 1200px width, so every viewport from 1100px to 1199px got a container up to 100px wider than the screen. That does not surface as a horizontal scrollbar. `body` hides the overflow and `margin-left/right: auto` cannot resolve to a negative value, so the container is pinned to the left and its right edge is silently clipped -- the layout stops being centred and part of the header runs off-screen. Each band is now clamped with `min(..., 100%)`. The hd band goes fluid between 1100px and 1199px and pins to 1200px from 1200px up, as intended. The xl/xxl bands are not affected today, but they are clamped too: the widths are custom properties so a theme can retune them from :root and reintroduce the same mismatch. `100%` rather than `100vw`, because `body` has `overflow-y: scroll` and 100vw would include the scrollbar gutter. It also behaves correctly when the discussion list pane is pinned, where the containing block is already narrowed by the pane width.
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
1 participant
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.
Changes proposed in this pull request
The
@desktop-xl(≥1600px),@desktop-xxl(≥2000px) and@desktop-xxxl(≥3000px) breakpoints were introduced in #4066 — but only the extension-discover grid ever used them. The main.containerstill stops stepping at@desktop-hd: every screen wider than 1100px renders the same fixed 1100px column, leaving 40–55% of the viewport as dead margin on ordinary 1440–2560px displays.This completes what #4066 started:
.containersteps through the existing bands: 1200px (hd), 1300px (xl), 1600px (xxl). Below 1100px nothing changes.--container-hd/--container-xl/--container-xxlinroot.less), so themes retune any band from:rootwithout re-declaring media queries — media queries can't read custom properties, but their width values can.@desktop-xlup the discussion post stream is capped at--discussion-content-max-width(1000px), with the slack sitting between the prose and the scrubber sidebar. Without this, post text at a 1600px container reaches ~155 characters per line.Measured (viewport → container / post text width): 1440 → 1200/830px · 1920 → 1300/895px · 2560 → 1600/895px (capped; previously 1100/730px fixed at every size).
Reviewers should focus on
DiscussionPage.less: the page container is row-reversed, somargin-right: autoon the content is the main-start auto margin that pushes prose flush-left with the whitespace before the scrubber.Themer documentation: flarum/docs#567.
Confirmed