Navigation sidebar Logo / Close / Back button spacing issues

rinku jacob 13 → made their first commit to this issue’s fork.

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

i will work on this issue

rinku jacob 13 → changed the visibility of the branch 3511047-navigation-sidebar-logo to hidden.

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

rinku jacob 13 → changed the visibility of the branch 3511047-navigation-sidebar-alignment to hidden.

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.

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