On large screens full width is not used, but page TOC need horizontal scrolling

[tbrlpld]

The main content container and the page TOC seem to have some limited width set somewhere. This is particularly jarring since it creates horizontal scrolling on the page TOC 😬

Maybe we can update this to make better use of the available space.

[lb-]

Adding as good first issue.

See also some other similar PRs that aim to ensure the column layouts work better

• Fix multiple minor styling issues #191
• FIX - fixed text overflow in TOC sections (#204) #215

[Theresa-o]

@lb- I can confirm that this issue is still pending.
I would work on this and provide feedback.

Thanks

[Scotchester]

As noted by @lb-, PR #215 addressed the problem of the horizontal scrollbar.

I do think there are some column layout issues we should address, but the presence of some unused space on the right is not the worst of them. In fact, I think we should have more unused space on wide viewports. As it currently stands, our main text column is far too wide for good readability.

IMHO, I would suggest the following:

• Limit the main column width to just enough that our code snippets would fit a max of 88 characters, which is our Python line length limit. This should naturally result in a decent max width for regular paragraphs. (A quick test suggests a good starting point would be max-width: 53em on the main column.)
• Widen the left nav column (i.e., give it a max width) that is just large enough to not have any current nav items wrap onto 3 lines.
• Set the right page TOC column to the same width as the left nav.
• Move the new word-break: break-all; property on .page-toc to .page-toc code so that it doesn't apply to plain text. (It was really just long code items that were causing the horizontal scrolling.)

[tbrlpld]

Totally agree @Scotchester.

My grief with the whitespace is only that it's there while we also have the Horizont scrolling on the page toc on the right.

But yes, we should have more whitespace on a large viewport like this.

[Scotchester]

Thanks, @tbrlpld, but just to reiterate: The horizontal scrolling has been fixed :) See: https://docs.wagtail.org/en/stable/releases/3.0.html