Gin panel overlaps toolbar when legacy mode is not enabled

I stumbled on the same issue and 10 minutes ago, I checked if there was already an issue for it. There wasn't, so I checked out the project to make a patch. I come back to create the issue and lo-and-behold, Jurgen beat me to it!
My solution was exactly the same, so I can confirm this works and marking it RTBC.

Note that this does mean that if you want to use this with gin_toolbar, it does require gin to be at least 3.0-rc1.
If we were to use a fallback, it would work with any version.
Not sure how I extend your fork, so I'm just going to add a patch file that uses the fallback method.

I've tested MR !14, it applies cleanly and solves the overlapping issue 👍

I've attached a screenshot without, and with the patch applied.

RTBC++

RTBC++

RTBC++

The changes so far are excellent, but they don't account for whether the toolbar is open (--gin-toolbar-width) or collapsed (--gin-toolbar-width-collapsed). I updated the fork to do that.

And then the indicator was too big?

Hi @leymannx! Apologies in advance, as I'm not sure I fully understand your question. My update doesn't change the size of the indicator, I'm updating the position of the "flyout" menu/panel to account for whether the vertical gin toolbar is expanded or collapsed. I hope this image helps to clarify (click for full size):

The previous changes worked well for a collapsed toolbar. But, for example, if I'm using the expanded toolbar, and I'm attempting to click the 'Structure' item title text (not the icon), the menu immediately appears and I'm suddenly clicking the 'Block Layout' item.

This behavior is consistent with the Gin toolbar when Environment Indicator is not enabled. I hope this helps.

Sorry to further muddy the water, but I just realized that all of the changes so far break the submenus when Gin toolbar is in "mobile" mode. Before my updates in #12/13, the sub-menus look like the screenshot below:

After my changes, the submenu items aren't visible at all:

It looks like all of this should be wrapped in a media query, but I wanted to see if anyone else can confirm this issue before I make any additional changes.

The media query that seems to be appropriate based on Gin's CSS is:

@media (min-width: 61em) { 
  /* previous changes here */
}

At least that works in my initial testing.

This comment will be the basis of a separate issue.

So I've just now realized that this issue is really just about updating a CSS variable that changed in Gin RC1. My apologies! I'll revert my changes and open separate issues.

Thanks for all the work here!