Dialog close icon with Layout Builder in Drupal 10

@KarlShea are you using gin_lb? If so we might want to move it there.

@saschaeggi I'm not

+1 to this, not using gin_lb and seeing this problem after updating to Drupal 10 because of the missing variables.

Gin is used, but the source of the problem is Claro as Gin doesn't touch the width and height of the element.

Setting the variables --jui-dialog-close-button-size --jui-dialog-close-button-size solves the issue.

Screenshot of the CSS applied to the element.

The surprising thing is that I can see /core/themes/claro/css/base/variables.css loaded on my theme ¿¿??

SO.. i did a little investigation and the following is happening:

1. When you load layout builder, you are using the front-end theme so no Claro assets are present on the page (claro/global-styling library, which includes the variables.css file)
2. When you load the modal, the Gin theme kicks in and via AJAX the assets are loaded: now the variables.css file is present
3. ...but, somehow (maybe because of dynamically loading CSS via AJAX?) the new CSS variables are not applied to the page: they all appear as undefined

If this is confirmed, it might be a major bug as CSS is moving towards variables and then, any AJAX loading of CSS assets that involves adding CSS variables might fail.

@KarlShea are you using layout_builder_iframe_modal

If so, I think that's the culprit. The CSS is attached, but inside an iframe (while the dialog topbar, where the button is in, remains outside the iframe). That's why the CSS variables can't access the outer scope.

My bad, this is independent of the use of layout_builder_iframe_modal.

It seems related to the fact that Layout Builder isn't using the admin, but the public theme, so Claro+Gin styling is not applied there.

Fixed on dev branch 👍

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