Layout is too narrow at wide screens

[choldgraf]

Just wanted to share a general feeling that I've got with the new layout structure. In general I think it is an improvement, but it feels like the max-width is too small.

For example, on my laptop (not particularly big, only 13"), there is already whitespace to the left of the TOC:

There's whitespace on the left even though I think the page content could definitely be expanded by a decent amount more.

I think this is because (in my opinion), Bootstrap has a very conservative definition of "extra large", and we are now using a container-xl container instead of a "fluid" container for the content, so the max-width is being hit relatively early. (as an aside, Bootstrap's definition of "XL" is my definition of "medium": a 13" laptop screeen)

Is there any way that we could increase the maximum size of the content?

[jedbrown]

Is there a recommended/supported way to customize this width? The current limits are super constraining for projects that use longer lines in code blocks, leaving thousands of pixels blank on a 4k display while clipping content.

[StefanUlbrich]

@jedbrown @choldgraf I agree that on 4K the theme is too narrow. The documentation hints at adding a custom css rule but this seems to have no effect. How would one change this value and do you think it might make sense to make this a parameter for the theme?

.bd-content {
  flex-grow: 1;
  max-width: 100%;
}