Node form layout looks awkward on wide screens since #3158854

ok, I have to look into howto create patches. The only viable solution is to remove the max-width entirely. Everything else doesn't work.

Have to chime in here and say this max width makes this theme totally unusable. We setup all our node edit pages with vertical tabs to make the editing process simpler for users, keeping things in sensible groups. This destroys all that, along with using Paragraphs. Will be going back to Seven until this issue is resolved.

It seems like maybe the solution here is to make this configurable? I can understand the desire to have this feature for new sites and better OOTB experience, but it is certainly not workable for a lot of setups using vertical tabs and/or Paragraphs.

Seems like there are many legitimate objections to the changes here! However, there's unfortunately zero chance of getting it addressed by commenting on an issue that was closed almost a year ago. Fortunately, if this same info is included in a new issue this moves from "zero chance" to "quite likely" that someone will work on addressing the problems reported.

The open one is marked as duplicate and there is a link chain to here after upgrading to D10 with Claro. Using vertical tabs. For D9 we overrode max-width in css. Now the thin column is back without max-width but width: min().

We use a custom block for inline css overrides for claro admin theme for ease of adjustments.

Used this in D9

<style type="text/css">

.layout-region--node-main .layout-region__content,
.layout-region--node-footer .layout-region__content {
max-width: 100%;

</style>
}

It changed for D10

We can't make it 100% of the area without pushing the admin tabs off canvas. 75rem seems to be okay.

<style type="text/css">

.layout-region--node-main,
.layout-region--node-footer {
width: min(75rem, 100%);

</style>
}

Before in D9 it flexed well with the admin tabs at max-width 100%;

Crutch check out this module : https://www.drupal.org/project/asset_injector → to do CSS better then a custom block, the way you're doing it.

Thanks alphex! Installed and using.

Note that the class changed for 10.3.1

.layout-region--main,
.layout-region--footer {
width: calc(100% - 2rem);
}

.layout-region--main .layout-region__content,
.layout-region--footer .layout-region__content {
max-width: 100%;
margin-right: auto;
margin-left: auto;
}