Something recently changed, can't increase `--topic-body-width`

Development

AI-generated summary

Members of the forum are discussing a change that affected their ability to adjust the width of the forum’s posts after an update to version 3.3.0.beta1-dev. rahim123 expresses difficulty in adjusting the --topic-body-width property to extend the layout, presenting a screenshot that demonstrates the issue. Don explains that the change is due to an update in the DiscoTOC theme component that calculates the width of .container.posts in percentage rather than fixed values. rahim123 responds by unsetting these values to accommodate users’ preferences for wider posts. In further discussion, Don suggests two possible solutions to revert the layout changes: resetting .grid-template-columns to auto auto or changing the percentages to manipulate the width. Finally, rahim123 confirms understanding of the changes and solutions provided by Don and shows appreciation for the assistance.

1

Hi there, I’ve been using a customized width for my forum because most of my users have a strong preference for a wider layout with less whitespace:

:root {
  --d-max-width: 1900px;
  --topic-body-width: 1244px;
}

With the --topic-body-width I used to be able to push the timeline and the timeline footer controls to within a few pixels of the right margin on my 1920px browser window. But now with the updates to 3.3.0.beta1-dev even if I use much larger --d-max-width and --topic-body-width values I can still only make it this wide (screenshot on Meta with those changes applied in the HTML inspector):

image
image1919×782 148 KB

It looks like the maximum width of the topic body is about 1040px. I tried eliminating the min-width value in .timeline-container .topic-timeline but that also doesn’t make any difference. Any tips? Thanks a lot.

2

Hello :wave:

This is, because the DiscoTOC - automatic table of contents theme component new update calculates the .container.posts in percentage. Which is really great I think.

3

Thanks very much! I don’t have a lot of TOCs, and there is a strong user preference for wider posts, so I unset it:

.container.posts {
    grid-template-columns: unset;
}

Should be OK that way right?

4

By default, this is in core if you don’t use D-TOC. :arrow_down_small:
So you can revert this percentage changes with this.

@media screen and (min-width: 925px) {
  .container.posts {
    grid-template-columns: auto auto;
  }
}

Or you can make wider the post section with changing the percentages. For example;

@media screen and (min-width: 925px) {
  .container.posts {
    grid-template-columns: 80% 20%;
  }
}
5

Thanks for the reply! I do use D-TOC, but I don’t have a lot of topics that use it, so it doesn’t matter if there is a bit of content shift on the few topics that have a TOC. So to revert to the previous shifty Discourse behavior would you recommend

or

?

Thanks again, I never would have found the source of this change without your tip.