Improve horizontal alignment so that elements are aligned on a vertical line

@saschaeggi Are you talking about alignment of inner elements?

Fixed horizontal alignment of inner elements. Please refer following screenshots as well.

Hi @asmita26 please update the patch with pcss.css file.

Updated the patch with pcss.css files.

Patch #12 applies successfully and It's working as expected. Here I have attached some screenshots of tested pages.

Before:

After:

Thanks!

@saschaeggi SS after adding content and in table alignment of select box column is aligned with the other items.

If is there anything I missed please add.

Thanks!

Verified and tested by applying patch #12. Patch applied successfully but the issue still exists.

Testing Result:
All the content is aligned to left except:
1. Bottom 'Apply to Selected Items' button on the 'Content' tab
2. Action dropdown and Apply button on the 'Comments' tab

See attached screenshots

#20
1. Bottom 'Apply to Selected Items' button on the 'Content' tab -Done
2. Action dropdown and Apply button on the 'Comments' tab -Done

Please review the patch #22 attached the screenshot for the reference.

Tested patch from #22 and result is OK
But how we should align Show all columns link for mobile?

But how we should align Show all columns link for mobile?

Tested the patch on mobile attached the screenshot for the reference and the result is OK.

#23 failed to apply on 9.2.x
Re-rolled the patch.

Fixed the issue mentioned in #23
https://www.drupal.org/project/drupal/issues/3086780#comment-13735031
Attached screenshot for the reference.

Worked on the failed test cases.

Worked on the failed test cases.

The above patch works fine.
Before patch

After patch

#31 Patch failed

#37 Please review the patch

Verified and tested patch #37.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance -> Apply Claro theme
# Goto: admin/content
# Horizontal alignment elements not in the correct way

Expected Results:
# Improve horizontal alignment so that elements are aligned on a vertical line

Actual Results:
# Currently the alignment is a bit mixed and going outside

Please check the attached screenshots.
Can be a move to RTBC.

1. +++ b/core/themes/claro/css/base/variables.pcss.css
   @@ -65,6 +65,7 @@
   +  --space-xm: 2rem; /* 2 * 16px = 32px */
   

   We better do not introduce new variables that can be calculated just using calc() or we'll have troubles naming them in the future.

2. +++ b/core/themes/claro/css/base/variables.pcss.css
   @@ -65,6 +65,7 @@
      --space-m: 1rem; /* 1 * 16px = 16px */
   
   +++ b/core/themes/claro/css/components/content-header.pcss.css
   @@ -7,6 +7,6 @@
   +  padding: var(--space-l) 0 0 var(--space-l);
   
   +++ b/core/themes/claro/css/components/tabs.pcss.css
   @@ -20,6 +20,10 @@
   +  margin-left: -2rem;
   

   This could be better defined with negative calc: margin-left: calc(var(--space-m) * -2);

3. +++ b/core/themes/claro/css/components/tabs.pcss.css
   @@ -20,6 +20,10 @@
   +#block-claro-primary-local-tasks {
   

   We should avoid the usage of IDs. The class "block-local-tasks-block" is available to use here.

Design comments
Also, on a design perspective, this looks a bit awkward with the details and table standing out on the left. As @saschaeggi mentioned on #16 Here is a visual explanation of what I mean: on the left, the current changes, on the right what I think that would make more sense:

Anyway, thanks all for all this work! It is great seeing this moving forward :)

I forgot to upload an screenshot of what I mean so it's easier to understand. Updating previous comment with it.

Tagging for Design4Drupal 2021. Contributions are Friday, July 22
https://design4drupal.org/

Correcting tag Design4Drupal2021

Tagging for DrupalCamp Colorado DCCO2021 which is Sunday August 8.
https://2021.drupalcampcolorado.org/contrib-day

This patch can be re-rolled into a Merge Request to make maintainer review easier, thanks!

Re-rolled patch #37, Attached interdiff for same. Addressed #40, suggestions.

I changed the approach as asked in comment #46

should these details be like this?

the menu box "Content" is not aligned with the rest, it is bigger than the others..

When dont have nothing is listed, the title make misaligned

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

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

I have created a MR with updated changes, please review

Tested using MR 7817 : 3086780-improve-alignment
The issue is not resolved
Tested on D11
(Patch is not applicable for drupal 10.2)