Gin Top Bar styling is fully gone in 11.3.x

The core issue is that we added a CSS reset with the specificity of an ID to prevent front-end styles from bleeding in.

We'll need to explicitly add CSS specificity into Gin assuming Gin wants to keep on affecting styles within Navigation's top bar, or sidebar.

Change record (currently draft) at https://www.drupal.org/node/3560492

Tagging for Drupal CMS.

There is also a slight regression in the Navigation styles, obviously same cause. Left is 11.2, right is 11.3 which looks more like Claro.

Created a MR that fixes this on 11.3.x following the change record.

@idiaz.roncero thanks for starting the MR. As @pameeela indicated in #5, this approach needs to be extended to more components like the left toolbar and also more components in the top bar.

Once we've fixed all of them, we shouldn't forget to merge the changes into #3556948: Merging Gin as Admin theme.

Yes, I realized this is not enough as other components (such as the sticky form actions) are also affected.

I've added a few more, but the whole issue is much bigger. There are many properties like color, font, sizes, etc., defined on a global level, and they get reset by this as well. I have no idea, if and how we could save them without having to repeat them all in the more specific context.

CSS variables won't get reset by this. But regular properties would.

You could also wrap it in something like

:is(#specificity-hack, *) {
 .my-regular-selector {
    ...
  }
}

But you want to make sure it doesn't bleed into the front-end theme.

Just updated two sites to 11.3 which had this behaviour.

Applying the changes in the MR fixed it partially for me.

Thank you!

I also just updated sites, and ran into this issue. The MR partially fixes the problem for me.

I think it's probably worth merging this as-is and creating a release, because it's much better even if not perfect.

Before:

After:

So there would still be a bit to fix, but I think given the level of breakage, this is a good improvement.

Same here. After updating a project with Navigation enabled to 11.3, this bug appeared. The MR is a partial fix.

I've noticed that on node view it works perfectly:

But on the node edit it breaks (partially even after the patch):

I have created a second MR!728 which undos the reset from the navigation module. It's not perfect yet, but much better I'd say.

The original intend by the navigation module to add specificity in Gin seems unrealistic as this would be across many dozen files, and even then it doesn't seem to work out. And as Gin has taken control over the navigation styling entirely anyway, it seems to be the wrong approach that the navigation module resets all afterwards. At least when Gin goes into core, this approach needs to be revisited.

Please, test the new MR, we should publish a hotfix asap as this breaks 11.3 badly.

@jurgenhaas I tested the MR but it doesn't seem to have any effect for me? (I cleared the cache about 10 times just in case...)

Regarding comments in #15, #16, and #17, which came in while I was working on the second MR, I'd still prefer the second approach as in the first one, especially the buttons in the top right are not working, and the sidebar toggle on the right doesn't work either. But the second MR does fix that.

@pameeela #20 is strange. Did you also force reload in the browser?

Yes, I can see the new CSS is loading too.... perhaps someone else will have better luck, it is the end of a long day/week so I may just be missing something!

So, it should load /styles/admin-reset-styles.css from the Gin project and at the same time it should NOT load the admin-reset-styles.css from the navigation module.

Tried it on a second site with no luck and then found the issue, it's now fixed, and the new MR should now work on all sites, I hope.

Tested MR 728 on our site, which fixes the issue for all pages except the layout builder edit.
This might need a separate fix in gin_lb?

Thanks @strykaizer for your feedback, that's good news. And yes, gin_lb is not covered here, so that may require some extra handling in that project, I haven't looked into that.

Ah yes, looks good now! Amazing idea to fix this :)

So, MR!728 is merged and Gin 5.0.10 got released. But we keep this issue open as we still need to properly address the underlying issues.

I updated and all is good now except for the header height on edit pages.

Huge improvement anyway, thanks for your work!

View page (correct bar height)

Edit page (still a small problem with bar height)

I linked #3563812: Top bar CSS does not set text colour which is actually a core issue but only surfaced in Gin because of the reset. In case it pops up here.

dark theme is not applied correctly:

Tested before and after the fix. Thanks a lot for working on a quick fix.
After further testing
I noticed a spacing issues for links or buttons in the Navigation Top Bar and the Navigation Side Bar, with the hover/focus over the create content link.

I've opened an MR which should fix (most) of the styling issues related to the navigation & top bar 👀

👉 https://git.drupalcode.org/project/gin/-/merge_requests/736

One thing which we'd need to test if this breaks anything for 11.2

Thanks for all the hard work! Tried the merge request it on a site running core 11.2.10 and it looks like it's almost there but a few things still stand out. There's a strange space at the bottom of the vertical Navigation and the top bar edit link seems to be missing the accent colour:

At mobile size, the top bar has a white background colour in dark mode:

Navigation gap is also visible in the back-end and there's something odd happening with the block titles:

@casey's commit seems to have fixed the vertical Navigation gap and top bar issues for me. 🙌

@f0ns I'm confused by your screenshots in #31; the top one is Claro surely? You can see they are different if you look at the left nav, Claro doesn't have a border below the create menu but Gin does.

I am seeing the toolbar height issue on view and edit pages in Gin. The issue seems to be that the toolbar height is set to 54px in Gin but 64px in core.

@pameeela This screenshot is taken on Drupal website where Gin is installed and set as the administration theme (also for adding and editing content).

Claro is not used but is enabled on this installation (as it's a dependency for Gin).

On this installation I also have Navigation enabled and Toolbar. Gin Toolbar is not enabled, maybe this is what is causing this?

Gin Toolbar is not enabled, maybe this is what is causing this?

Ah yep, that makes sense! So basically, Claro is styling the navigation for you on front end pages because Gin Login is not loading Gin styles.

Yes well, I'll leave it like that for now because it looks less wonky like this.

I can reproduce this on Drupal 11.3.x + Gin. Core’s top bar reset is overriding Gin’s styling, so the top bar height/spacing no longer follows content.

I tested a fix by increasing specificity in Gin and explicitly overriding the top bar sizing on desktop:

@media (min-width: 64rem) {
  :is(#extra-specificity-hack, [data-drupal-admin-styles]).top-bar {
    block-size: auto;
    min-block-size: var(--admin-toolbar-top-bar-height);
    height: auto;
  }

  :is(#extra-specificity-hack, [data-drupal-admin-styles]).gin--navigation-top-bar {
    min-height: 64px;
    height: auto;
  }

  :is(#extra-specificity-hack, [data-drupal-admin-styles]).admin-toolbar {
    inline-size: max-content;
    width: max-content;
    max-inline-size: none;
  }
}

This restores Gin’s top bar styling and allows the bar to expand with its content. I’ll attach before/after screenshots.

Could everyone please verify this? Thank you.

Here is a patch.

I'm noticing that the colors for things like the buttons on the frontend are also being overwritten by this "#extra-specificity-hack". I have in my Gin theme settings the primary accent color set to #5d1725, which is our maroon color. It works fine on the Drupal backend, but is being overwritten by the specificity hack styles to be the default blue color (the CSS custom property sets --admin-toolbar-color-blue-450) in the frontend for the Gin Toolbar.

Possibly related issue #3567146: Top bar background color should use CSS variable

I'll look at this sometime this week. I wrote the reset that screwed everything up 🙃

I need to know what's still broken, and whether that's with or without Gin Toolbar.

Re-tested with the latest MR on 11.3 and 11.2, and on 11.3 without Navigation enabled. Definitely a massive improvement over the current state! And I couldn't see any obvious regressions for 11.3 or for Gin without Navigation -- so I would probably aim for another patch release with these changes for now? And that way we can easily test for other problems and fix them in separate issues possibly. I'm having trouble keeping up with this one and I know others are too!

Thank you everybody for reporting, testing, and contributing fixes to this issue. We've decided to merge the current MR and tagged 5.0.11 - not because it fixes everything but it's a good improvement that all sites should benefit from asap.

As for further issues, please report still outstanding issues in #3567245: CSS revert all from navigation module clean-up where we plan to continue working on this. Just add comments and details to that issue, I'll take care of updating the issue summary on a regular basis then.

Just upgraded and the issue I noted is fixed. Thanks! If I have time today I'll see if I notice any other issues and post in the other topic.

Forward-ported into core in #3556948: Merging Gin as Admin theme