Contrib.social

ui.dialog z-index problem in D10 Layout Builder

Open on Drupal.org →
Created on 18 May 2023, over 1 year ago
Updated 3 October 2023, about 1 year ago

In Drupal 10, the PostCss processor for themes is no longer expanding css vars and instead supports those css vars directly. For example, in Claro css/components/jquery.ui/theme.pcss.css there is this:

.ui-dialog {
  z-index: var(--jui-dialog-z-index);
}

In Drupal 9, this compiled to this in the theme.css file:

.ui-dialog {
  z-index: 1260;
}

but in Drupal 10 we get this in theme.css:

.ui-dialog {
  z-index: var(--jui-dialog-z-index);
}

and Claro defines the --jui-dialog-z-index to be 1260 in the variables.css file.

Now, when using gin_lb, the front-end theme might not be defining this variable. Some themes, like Olivero, have their css hardcoded to be:

.ui-dialog {
  z-index: 1260;
}

But for any custom theme there might not be any rules for ui-dialog.

The result of this problem is that the layout builder sidebar, along with any dialogs such as media library, end up being hidden behind content that might use z-index. And it's a regression between how it worked in Drupal 9 to how it works in Drupal 10.

I'm not exactly sure if gin_lb is the right place to fix this, but since the Claro variables are not being added to the layout builder page, I think the --jui-dialog-z-index variable needs to have a value set.

If I add this to my own custom theme:

:root {
  --jui-dialog-z-index: 1260;
}

then everything works. But I haven't seen any docs that specify this is needed in the front-end theme. Adding it to gin_lb would be a big help, but not sure what file would need to change for that.

Ideas or other suggestions welcome. For now I'm just going to add that var to my own theme.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States mpotter

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024