Hi there, I’ve found that my users really hate the wide left and right margins that Discourse uses by default. So I was using GitHub - programmersforum-reborn/discourse-wide-posts: Increases post width together with these additional CSS tweaks:
:root {
--d-max-width: 1900px;
--topic-body-width: 1244px;
}
A recent Discourse update appears to have broken GitHub - programmersforum-reborn/discourse-wide-posts: Increases post width , and the full-width composer panel was going off the left side of the screen. So I disabled discourse-wide-posts and installed GitHub - discourse/discourse-full-width-component: Make Discourse occupy the full browser width , which only reduces the left margin, plus these CSS tweaks to reduce the right margin and also make the composer pane full-width:
body.has-sidebar-page #reply-control.show-preview:not(.fullscreen), #reply-control {
max-width: 100%;
margin-left: 0;
}
:root {
--d-max-width: 1900px;
--topic-body-width: 1244px;
}
But there are a few quirks. Most of these can be reproduced here on Discourse Meta with the Default (full-width) or 🏡 Fully, a Full Width Discourse Theme themes.
First of all, without my previously mentioned CSS tweaks to #reply-control, the pane jumps around depending on zoom level:
Also, at normal zoom levels the sidebar-wrapper div adjusts its height according to the height of the composer pane below it, but past a certain width of the browser window something changes and it starts being chopped off with no way to scroll to the bottom of the sidebar (check the screenshot image width to see where this happens approximately):
Finally, with the --topic-body-width: 1244px; rule, when viewing a topic the sidebar items shift upwards during the time that it takes to load a new chunk of posts in long threads when jumping to a different position in the posts timeline slider, and then they return to their normal position after things are done loading. This is quite distracting, and it seems to have started happening since this update that required me to redo my custom width configurations. If I change the CSS rule to --topic-body-width: 100%; then the sidebar items stay in place during timeline shifts, but during the time that the spinning loading indicator appears, the timeline shifts to the left (probably to the standard --topic-body-width of Discourse?) and then jerks back to it’s normal position close to the right margin. Is there any workaround for this? Possibly a width rule I can add to the spinning loader thingy? I can’t catch it with the HTML inspector because it’s too brief.
Please let me know if you need any more information to debug this. Thanks!