[docs] Make <main> responsive to font size

[eps1lon]

This is a bit of an experiment how we can reconcile grids in Material design with system-adjustable font settings.

Right now we're restricting <main> to a pixel based max-width. This works fine with the default font settings. However, browsers can change the default font settings. Increasing the font size to "Large" in chrome (20px) leads to a cramped props tables in /api:

By making the max-width based on ch we give every font setting the same amount of characters per line (up until the screen is no longer big enough).
Preview: https://deploy-preview-24531--material-ui.netlify.app/api/text-field/

In the end, it might be interesting if we could make breakpoints based on ch entirely. This is just an incomplete fix for our specific problem in props tables.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 90008f9

[oliviertassinari]

The change seems (I don't have a large enough screen to be able to truly experience the difference) to work better when the base font size is increased (I haven't tested decreased).

Does it make sense to create breakpoints based on ch?

I'm not sure to understand the question. If we move forward with maxWidth: '120ch', I think that it would indeed make more sense in this very case.

If it's a broader question:

• I don't think that the Container should use the ch unit by default, simply because the content matching a specific set of characters is not the most common objective for its usage.
• The breakpoints are designed to match underlying hardware devices, it seems that a unit pixels based best approximate it.

---

My main question would be: Is the change worth not dogfooding the Container's default implementation?

[eps1lon]

I don't think that the Container should use the ch unit by default, simply because the content matching a specific set of characters is not the most common objective for its usage.

Yeah, definitely. What I meant is that we use ch based breakpoints in the theme used in our docs.

The breakpoints are designed to match underlying hardware devices, it seems that a unit pixels based best approximate it.

Sure, but this seems to break down once font size is adjustable. Especially the larger the container is.

[oliviertassinari]

@mbrookes What do you think?

[oliviertassinari]

No answer from Matt so far, we can wait a bit more, otherwise, it seems OK-ish. The layout of the docs is very custom anyway.