Navigation sidebar Logo / Close / Back button spacing issues

The MR contains 1000+ changes which are outside of this issues scope.
Please raise correct MR.

i will work on this issue

I have created a new merge request on a new branch and made adjustments to remove the tight space between the toolbar header logo and the titles.

I also updated the backlink hover style.

Could you please review the merge request?

Please check css linter.

When I tried to create the first MR, the issue was on the 11.1.x branch. so i created MR according to that .Now, the branch has changed to 11.x, so I will create a new branch and merge request for this issue. I believe the merging is happening on the 11.x branch

it affects popover globally.
https://gyazo.com/2ba673f49f6a35e1040bac2059a43f06

Hello @finnsky , Thanks for the review. I noticed the error and I'm currently working on fixing the issue.

hi , I thoroughly investigated the issue, and it appears that the problem occurred due to the stacking order of the popover being higher than that of the admin toolbar. To fix this, I modified the stacking order of the popover without altering the existing --admin-toolbar-z-index-popover. Instead, I introduced a new variable named --admin-toolbar-z-index-popover-wrapper and set its value to 98, since the admin toolbar's z-index is 99. Could someone please confirm if I'm on the right track or if any modifications are needed to my MR?

Now another thing cutted
https://gyazo.com/8144ef07472d3a461ab478946704ba81

I am working on it.

@finnsky, Please review the changes. I am attaching before and after images.

Applied Patch MR!11387. The spacing between the logo and the menu in mobile view is fixed .
But there is a issue when we navigate to the shortcut menu link with child links , Blue bar can be seen at the top
Attching the screenshot for the issue.

Moving the issue to need work.

Hi @divya.sejekan thanks for the testing but it seems you are testing it in Gin theme. Now in gin it is overriding padding-block-start value that you can see in the attached image. As i changed the padding-block-start to padding-block so the padding would come for both top and bottom. So i think we can fix that in Gin. I am attaching the image for better understanding. I am again moving this to NR to hear your thought.

@divya.sejekan, see if we remove the override part that is coming from Gin then it is working fine. This is why i think the issue you mentioned is Gin specific issue. Please see the attached image here.

@sandip Yes as you said I was using Gin theme , I switched to claro them, here it works fine . But tried with default Admin theme. Here the blue bar is visible. Can you have a look once and see if the issue is reproducible.

@divya.sejekan, as i mentioned in #27 and #28, Gin is overiding padding-block-start in admin-toolbar-header class of naviation module. I also attached the image in #28 for clarity. We should make a issue there in Gin to remove the override part from Gin. Can you please go through the comments #27 and #28 and attached images once.

With Gin moving to core should we find a solution for both?

Yes we just need to remove this below css from Gin codebase that is overriding padding-block value.

.admin-toolbar__header {
   Padding-block-start: var(--gin-spacing-xs);
}

As I mentioned in my comment #28 with an attached image.

I think it would be better to fix it in Gin otherwise maybe we have to use !important here.

@sandip hi!
thank you for work here!

Could you please close and reopen MR to restart Tugboat test instance?

Actually i am not getting the option to close this MR maybe @rinku jacob 13 requested the MR so he should have the option to close and reopen. @rinku jacob 13, Could you try it from your side once?

H @finnsky, I created another MR to restart tugbot instance but still it is not creating. I closed and reopened it but still no result.

Hello!

Now everything works, but in my opinion not as it should.

Previously there was a variable var(--admin-toolbar-sidebar-header); which controls the content indent. Now you have removed it. While leaving it in other places. Either remove it everywhere or leave it here.

The decision to move the content away from the header is obviously a design decision, so I can't decide anything here.

So I'm not sure anyone keeps an eye on that tag? I could be wrong just don't see it often and not sure who the design team is.

This is my first contribution. I'm working together with /u/kevinvdw , /u/hans_tys.
We are going to assign it to the right person who can make the design decision.

Ha ha - I was mentoring Jensdn and others on an issue and was just about to tell them all about the Needs... tags only to discover finnsky had already added it!!

This issue is free again for review :-)

Looks good to me on a design perspective based on the screenshots I found several comments before. As long as it applies to only submenus and it doesn't change the main navigation bar itself, it's OK on a design perspective.

I'll leave the RTBC for whoever reviews the code.

Note: For the next time, when an issue is tagged to get a design or UX review it needs to have clear before&after files (of the same exact area to review that clearly states) on the same comment or clearly saying which ones are the screenshots to look at. Please do not underestimate how complicated is for a designer (or someone not coding all day) to review issues and understand the context.

Thanks @ckrina for taking a look.

I did a rebase now and I'm not seeing the issue.

@smustgrave I cheked after rebase but the issue is still there in latest 11.x. Whenever there is a focus on Back button or close button it is overlapping with the below section. Can you please check it once if it persists on your local.

If anyone is up here for review then please see this before and after images for better clarity.

Before:
https://www.drupal.org/files/issues/2025-06-17/Screenshot%20from%202025-06-16%2016-05-18.png

https://www.drupal.org/files/issues/2025-03-04/mobile_hover_style_cut_off.png

After:
https://www.drupal.org/files/issues/2025-06-17/Screenshot%20from%202025-06-17%2011-24-41.png

I think there shouldn't be any difference between desktop and mobile.

I think it's correct now.

- I reverted to using a variable.
- Removed the negative margin for the first block. It was incorrect (10px instead of 12px), and it turns out it's unnecessary now.

This means we always have 16px between the logo and the buttons.

Appears to have a stylint issue

Fixed! Please review!

Sorry appears to need a rebase.

Removed wrong rebase item and fixed linter. Please review!

Rebase seems fine.

MR has merge conflicts.

I was easier to move fix in new branch.
Please review.

Rebase to new MR seems fine.

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.

Closed all the MRs lets see if that helps.

There's some conflicts in the MR. Feel free to move it back to RTBC after a rebase.

Moving back

Thank you! Committed!