BrianC seeks CSS solutions to expand the Categories + Latest view on desktop to use the full screen width, noting that standard container overrides like .wrap or #main-outlet were ineffective. chapoi suggests modifying the grid column layout on the main-outlet wrapper and adjusting the --d-max-width and --topic-body-width variables. BrianC confirms this approach worked and shares additional CSS for styling the category list and topic items. However, Gunnar reports that the provided CSS does not achieve the desired layout expansion on their site, attributing the issue to potential changes in recent Discourse updates. They note that the code only adds borders without altering the column width, and they are seeking a solution that utilizes more of the available screen space.
Everything else on the site can remain the same — I only want this one layout (categories on the left, latest topics on the right) to expand to full width instead of staying in a fixed-width centered column.
I’ve tried overriding many elements’ containers (.wrap, .container, #main-outlet, etc.), but this specific view still stays restricted, so I believe there is another wrapper or grid controlling its width.
Could someone point me to the correct CSS that controls the width of the Categories + Latest layout?
you’ll need a combination of changing the grid column layout on the main-outlet-wrapper + changing --d-max-width & --topic-body-width variables to suit your needs.
Did something change in later updates of Discourse, because this CSS does nothing on our site, other than add borders. (I created a new component, added the code to the CSS tab, and enabled the component.)
This is what Meta (and our own site) look like on my monitor by default. Using some of that space would be welcome.
