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

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):

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 Likes

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 Likes

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?

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%;
  }
}
2 Likes

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.

1 Like