Constrain max-width of admonition box

[HonkingGoose]

🚀 Feature

Pick a sensible max-width for the admonitions box to prevent them from becoming excessively large.

Have you read the Contributing Guidelines on issues?

Yes.

Motivation

I made some mock-ups for new admonitions in the Infima repo (see https://github.com/facebookincubator/infima/issues/55) as the current admonitions could use some work. While I was doing that I also noticed this PR https://github.com/facebookincubator/infima/pull/62. Once that PR gets merged the admonition box can grow even bigger.

I suggested to the Infima team to constrain the max-width of the admonitions on the Infima component side, but they said it should be fixed on the Docusaurus side. That's why I'm pitching this change here.

Pitch

I think preventing the admonition from becoming too wide accomplishes several things:

• Reduces visual noise from the colored background of the admonition.
• Makes the text in the admonition box easier to read, because it's no longer spread out across the full width of the admonition's box.
• Just looks nicer overall.

[slorber]

Going to close this because we can't really apply this max-width in a default way as some users will want to put larger rich content like code blocks and tabs and whatever inside admonitions, and we probably don't want to introduce a markdown syntax to make this customizable.

If you want to limit width of admonitions in your site, you can easily do this with custom CSS:

.admonition {
    max-width: 600px;
}

I don't think this should be applied globally, but it depends on your usage of admonitions

[HonkingGoose]

Thank you for explaining why you won't be building this, and thank you for explaining how to fix this with custom CSS.