feat: Add CSS class that works similar to p/dl/etc. that constrains content to the main content panel

[x42bn6]

I don't know where this is done in the LESS stylesheets, but in the generated CSS for pages, there is this CSS style:

@media (min-width: 1320px) {
  .main-content-column .mw-body-content .mw-parser-output > p, .main-content-column .mw-body-content .mw-parser-output > dl {
    max-width: 61.875rem;
  }
}

This, amongst others, ensures that <p> and <dl> elements have a gap between the content and the infobox section. You can see the difference here (>=1320px).

In the example above, I've built a small collapsible element that hides some information that is superfluous but can be expanded if a reader is interested. However, if I used a <div> containing element, which makes the most sense, the width is too wide. So I have to use a hack like using <p> or <dl>.

A similar hack is used here.

It would be a lot nicer if there was a CSS class that could be used for this purpose, to be used on any HTML element that needs to be constrained to the main content panel.

[hjpalpha]

that css is not part of this repository, it belongs to the stuff only the devs have access to (gitlab)