Fix GIN Admin Toolbar Style: Secondary toolbar is overlapped by the 3px of the indicators border-top

For any reasons, the 3px default border is overridden by inline style.
So if this is configurable by the user, this issue is not fixable without moving this value into a CSS variable.

Please review:

1. Added the border-width as CSS variable to have this as global "truth"
2. Replaced all static values in the CSS with the new variable
3. Grap the CSS variables value in the Javascript file and also replaced it with the static values

Whao this is really cool and was hard to find, I was wondering, why the margins were different! Nice catch!
Using a CSS variable totally makes sense here.

RTBC from my side, I can't see anything that could be done better, but let's hear what the maintainers think.

Just one comment left for maintainer discussion, otherwise RTBC.

Added a fallback value!

LGTM!

Hi!

I've been reviewing this MR and I can't reproduce or identify the issue under Drupal 10.1.x, environment_indicator 8.x-4.x, gin 8.x-3.0-rc6 and gin_toolbar 8.x-1.0-rc3.

I'm changing between environment indicator 4.x branch and 3388814-fix-gin-admin branch, after clearing the cache, and I can't find any difference.

For Gin settings, I've tested Sidebar, Vertical Toolbar, Horizontal, Modern Toolbar and Legacy and also the Secondary Toolbar in the Frontend.
For the Environment indicator, I've tested the Toolbar integration enabled and disabled.

Can someone post some screenshots or describe a bit more the issue and how to reproduce it?

Another issue that I can find in the MR is that in this line: (https://git.drupalcode.org/project/environment_indicator/-/merge_request...), there is the use of the CSS variable --border-width, but this variable is not defined.

Thanks!

Hi @isholgueras, no problem, only the Modern Toolbar and probably the Horizontal Toolbar are affected by this issue, because the vertical toolbar doesn't have the second bar next to it.

Heres a screenshot:

The Gin configuration looks like this (Gin Toolbar Module enabled):

Another issue that I can find in the MR is that in this line: (https://git.drupalcode.org/project/environment_indicator/-/merge_request...), there is the use of the CSS variable --border-width, but this variable is not defined.

Please see: https://git.drupalcode.org/project/environment_indicator/-/merge_requests/30/diffs#e05f17ede7c46d4798c5f60472b1cfc257aeee3a_1_1

Another issue that I can find in the MR is that in this line: (https://git.drupalcode.org/project/environment_indicator/-/merge_request...), there is the use of the CSS variable --border-width, but this variable is not defined.

Oh sorry, its about --border-width in the js file, not about --enviroment-indicator-border-width. I'll check this.

Good hint, fixed. I missed that when I replaced the original variable name, thx!

Thanks for explaining it. Yes, now I can reproduce the issue and this patch fixes the issue.
Thanks!