Gin Admin Theme - Save button isn't clickable

I am using ECA with Gin and have not experienced your issue. What are your versions of ECA and Gin? What Gin primary toolbar are you using (sidebar, horizontal, legacy, new)? Can you upload an image?

Thanks for the reply. Everything is up to the latest version, although it's been this way for quite a while with other versions as well.
Gin - 8.x-3.0-rc8
ECA - 1.1.4
BPMN.OI - 1.1.3

And I'm just using the theme... not the Gin Toolbar module. Checkout the attached screenshot.

Okay... I see the selector .bpmn-io > .action set to z-index: 101.

And .gin-secondary-toolbar is set to z-index: 102

This is the culprit. I guess the question is should we patch css for the gin theme or the BPMN.IO module? Or is there another more recommended approach?

When you bump up the z-index for .bpmn-io > .action does that fix the problem? BTW there is a similar issue in the BPMN.iO issue queue https://www.drupal.org/project/bpmn_io/issues/3334541 📌 The header is broken on mobile in Claro and Gin Active

I recommend a two-part strategy: 1) Post your z-index finding in the BPMN.iO issue queue so it can be catalogued and addressed. 2) Did you know you can modify the Gin theme without hacking the code or building a separate module? Just put your Gin css changes into a file called gin-custom.css and drop that into sites/default/files (and clear cache just to be safe). It's a beautiful option, I use it all the time.

Maybe there is a third approach, but that's certainly something for the bpmn_io issue queue: therefore, I'm moving this.

As we can see from a Drupal installation that also uses the Gin toolbar, the action buttons from BPMN.iO get shifted down as much that they don't get overlapped by the secondary toolbar:

That's achieved by this rule:

body.toolbar-horizontal.toolbar-fixed.gin--horizontal-toolbar #bpmn-io > .actions, body.toolbar-horizontal.toolbar-fixed.gin--vertical-toolbar #bpmn-io > .actions
{
  top: calc(var(--gin-toolbar-y-offset, var(--ginHorizontalToolbarOffset, 0)) + var(--gin-toolbar-secondary-height, var(--ginToolbarSecondaryHeight, 0)));

So, I suspect that either the css-selector doesn't apply or one of the necessary CSS3 variables is not present to do the right calculation.

@chucksimply could you check this in your environment please?

@jurgenhaas What does your display look like on a smaller viewport? I am now seeing when I resize my browser window that the action buttons do indeed overlap the Gin secondary toolbar (with the breadcrumbs) at smaller viewport sizes – when the primary nav is displayed as a sidebar. In that orientation, there appears to be a difference in a z-index somewhere depending on your Gin "Navigation (Drupal Toolbar)" setting. The action buttons are still usable with the "Legacy, Classic Drupal Toolbar" setting, but mostly inoperable (except for the bottom edge) with the others.

Yeah, that's an issue. And we haven't addressed small(er) screens yet, since we concluded that the main canvas would be usable on small screens either.

But we can't go on with that forever. So, if anyone wanted to address this and related ux issues, that would be great.

I guess, here is some good news:

The integration with the Gin theme has been improved, and we gain 2 improvements from that:

• The positioning of the action buttons is now handled by Gin and no longer tweaked by bpmn_io. That said, it should now always be correct.
• The property panel is now moved into the sidebar. This makes things arranged in a better way and on mobile, the sidebar is handled by Gin such that it can be toggled on and off to overlap the main content.

Hope, you all like this change and I will now also back port that into version 1.1

Automatically closed - issue fixed for 2 weeks with no activity.