Problem/Motivation

When using Claro on a node form the main content area is too narrow and leaves a lot of whitespace, which is not particularly useful given how much space fields can use on entity forms.

Steps to reproduce

Open a node form.
Stretch the page beyond ~1200px width.

Proposed resolution

Remove the following section entirely from core/themes/claro/css/layout/node-add.css:

  .layout-region--node-main .layout-region__content,
  .layout-region--node-footer .layout-region__content {
    max-width: 48rem;
    margin-right: auto;
    margin-left: auto;
  }

Remaining tasks

Fix the CSS.

User interface changes

The content well on node forms would use up more of the available space.

API changes

TBD

Data model changes

TBD

Release notes snippet

TBD

Before:

After:

CommentFileSizeAuthor
#4 3256817_after.png92.6 KBhmendes
#4 3256817_before.png87.99 KBhmendes
#2 issue-3256817-2.patch1.13 KBgauravvvv

Comments

DamienMcKenna created an issue. See original summary.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new issue-3256817-2.patch1.13 KB

I have added a patch, please review.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
hmendes’s picture

hmendes commented
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3256817_before.png87.99 KB
new 3256817_after.png92.6 KB

The patch fixes the problem for me.
Prints attached showing how it was before applying the patch and after.
Adding the prints to the IS and changing this to RTBC.

akhildev.cs’s picture

akhildev.cs commented

HI,
patch #2 applied successfully, changes made in "/core/themes/claro/css/layout/node-add.css & node-add.pcss.css"
removed entire class (
.layout-region--node-main .layout-region__content,
.layout-region--node-footer .layout-region__content{ ).

idebr’s picture

idebr commented
Status: Reviewed & tested by the community » Closed (duplicate)
Related issues: +#3184667: Node form layout looks awkward on wide screens since #3158854

The current max-width is 'by design' but is under discussion in an earlier issue, see #3184667: Node form layout looks awkward on wide screens since #3158854

I'll close this issue as a duplicate, so we can focus our efforts in the related issue.