Layout builder : Alignment and spacing issues on the edit layout page for content types.

jaydeep.jdb@gmail.com → closed merge request !8665

sanket.tale → made their first commit to this issue’s fork.

Alignment break and spacing issue has been fixed

MR has been created for the issue please review it and all unwanted changes have been removed.

Hi, I have verified this issue on D11 version as per #8 comment. The spacing and alignment looks fine now.

Testing steps:
Step1 : Install Drupal
Step2 : Enable layout builder module
Step3 : Use Layout Builder from Administration > Structure > Content types > Article > Manage display > default > layout options
Step4 : Create Article from Content > Add content > Article and Save
Step5 : Click on Layout tab

Attached the Before and After Screenshot
Hence can be move to RTBC
RTBC+1

Thanks for finding this and making an MR. When filing an issue, please keep all the headings in the issue summary so we can keep track of the work. Thanks.

@DishaKatariya, when adding screenshots they should be linked to from the Issue summary so that reviewers can find the latest ones. I know this issue has few comments but it still helps to get into the habit. This information goes in the 'User interface changes' section.

I don't review CSS so I can't comment on that. This does need a title that reflects what is being changed, in this case, where is the alignment problem? The issue title is used as the commit message, so it needs to make sense to people who are searching the git log.

Hi,
I've tested this issue on DrupL 11.x
The MR 8666 is appied cleanly..,
The spacing and alignment looks fine now.

Testing steps:

1. Install Drupal
2. Enable layout builder module
3. Use Layout Builder from Administration > Structure > Content types > Article > Manage display > default > layout options
4. Create Article from Content > Add content > Article and Save
5. Click on Layout tab

Attaching SS for reference
Also the issue Title is updated...

RTBC+1

Can I ask where the min-height value came from?

The alignment and spacing issues reported are not really bugs/problems - it is a vertical tab rendering exactly by design but it looks odd because there is only one tab.

I see the benefit in creating alternate styling for vertical tabs if only one tab is present, but the solution here is not going to work because

• It messes up the styling for instances when more than one tab is present
• Even in this single-tag situation reported in the issue summar, it only "fixes" it for the contents of that specific tab with the "create new revision" checkbox. Tabs can contain anything so setting it to the height of what happens to be in there on your site is not a solution that would benefit any use of tabs outside of those with content that fills the exact same amount of pixels.

The novice tag is sufficient as this is in the CSS component, refer to the issue tag guidelines → .

Only concerning factor in the MR is min-height: 5.125rem; which already @smustgrave already pointed out.

Hii @all,

I have reviewed, MR !8666. It's looks good.
Moving to the RTBC.

Neither point in #17 has been addressed.

@bnjmnm, As per your comment #17 I didn't apply any changes on vertical tab. Instead of it I have removed extra margin from the top and bottom of "Create new revision" Checkbox field. So I think it will not affect if more than one tab is present. I have attached the screenshot "top-bottom-margin-removed.png" for reference.

The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

sanket.tale → changed the visibility of the branch drupal-3458990-alignment-issue2 to hidden.

sanket.tale → changed the visibility of the branch drupal-3458990-alignment-issue2 to active.

Patch re-rolling

s per your comment #17 I didn't apply any changes on vertical tab. Instead of it I have removed extra margin from the top and bottom of "Create new revision" Checkbox field. So I think it will not affect if more than one tab is present. I have attached the screenshot "top-bottom-margin-removed.png" for reference.

This new merge request 8888 has essentially the same problem but slightly worse
In the MR I had concerns with in #17, it was because it was disrupting/breaking the styles of all vertical tabs to address the odd appearance when only one tab is present.

This newer MR is disrupting the styles of all <details> these include the ones used to create vertical tabs but also every details element on the site.

/* Details content wrapper */
.olivero-details__wrapper {
  margin: var(--sp1);

  @media (--lg) {
    margin-block-start: var(--sp1-5);
    margin-block-end: var(--sp1-5);
    margin-inline-start: var(--sp2);
    margin-inline-end: var(--sp2);
  }

In addition, the style changes of both these MRs only work if the tab is only one line long, it's not actually fixing the issue, it's just masking it for the specific content length and viewport width you're working with.

As mentioned earlier, an approach that styles single-tab vertical tabs differently is your best bet.

sheetal.pathak → made their first commit to this issue’s fork.

Hi
Drupal version 11.x-dev
Theme Olivero

I have created MR to address issue for mis alignment. As per suggestions in #17 and #31 it needed to styles single-tab in vertical tabs.
In MR I have added .first and .last classes , both of which appears when there is only one tab(refer after screenshot).
If there are multiple vertical tabs, first tab will have .first class and last tab will have .last class. (Refer screenshot)

Steps to review

1. Enable layout builder module and select Olivero theme
2. Use Layout Builder from Administration > Structure > Content types > Article > Manage display > default > layout options
3. Create Article from Content > Add content > Article and Save
4. Click on Layout tab

bnjmnm → changed the visibility of the branch 3458990-alignment-break-and to hidden.

The approach to styling a single tab in MR 8888 is good!

Something I noticed is about the current solution: it only works if the tab contents are one line. Anything beyond that results in the same symptoms that were reported. We should find a solution that works regardless of the tab content length.

I believe this issue is caused by ul.vertical-tabs__menu being given align-self: flex-start. To resolve it, unset this property using align-self: unset and provide height: 100% to both li.vertical-tabs__menu-item and the a tag. This should fix the problem.

I tried the solution provided the in the #38 but it doesn't work if there is more than 2 or 3 menu items. Instead of that I tried another with to setting position and alignment to unset. It works fine with the extra <li>'s and with extra menus as well.
Attaching the before and after images.

Before:

With Single Item:

With multiple <li> menu:

With multiple menu items:

Hello, I've Verified this issue on D 11.x
The MR is applied successfully.
The spacing and alignment looks fine.

Testing steps:-

Install Drupal
Enable layout builder module
Use Layout Builder from Administration - Structure - Content types - Article - Manage display - default - layout options.
Create Article from Content - Add content - Article and Save.
Click on Layout tab

Attaching screenshots-

Needs a rebase most likely

@sagarmohite0031 there are already multiple sets of screenshots attached to the ticket, additional ones are not needed please.