Make iframe CSS overrides easier

I also tried to read the SEC_FETCH_DEST header (which has 'iframe' as a value locally), but this is stripped out apparently on managed hosting like Acquia.

Using REFERER interferes on other pages (like navigating from node/*/layout to somewhere else).

Instead, I am now doing:

/**
* Implements hook_page_attachments().
*/
function mymodule_page_attachments(&$attachments) {
$request = \Drupal::request();
$request_uri = $request->getRequestUri();

if ($request->query->get('destination') == '/layout_builder_iframe_modal/redirect') {
$attachments['#attached']['library'][] = 'mymodule/layout_builder_overrides';
}
}

I believe I have the same concern as you, though I have to admit I'm not clear on how your posted workaround solves the issue.

I went, I think, in the other direction - if the contents have a class identifying it as being in the modal, then any modal-specific CSS can be written in your admin theme, e.g. to remove margin when in the modal but not in "regular" use, something like .layout-builder-iframe-modal .whatever { margin: 0; }.

I'm attaching a patch that adds this class.

In my case I only want to attach the library when the modal is active, then the CSS is applied. I wound up here in the end:

/**
 * Implements hook_preprocess_html().
 */
function mos_layout_builder_preprocess_html(&$variables) {
  $active_theme = \Drupal::theme()->getActiveTheme()->getName();
  $variables['attributes']['class'][] = $active_theme;

  $request = \Drupal::request();

  if ($request->query->get('destination') == '/layout_builder_iframe_modal/redirect') {
    $variables['html_attributes']->addClass($active_theme . '--layout-builder-iframe-modal');
    $variables['attributes']['class'][] = $active_theme . '--layout-builder-iframe-modal';
  }
}

Sample CSS:

body.gin--layout-builder-iframe-modal {
  padding-left: 0 !important;
}

html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal {
  padding-left: 0 !important;
}

html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .field-group-tabs-wrapper .draggable,
html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .field-group-tabs-wrapper .draggable td *:not(div.form-wrapper) > div.form-wrapper,
html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .draggable,
html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .draggable td *:not(div.form-wrapper) > div.form-wrapper {
  width: calc(100% - 45px) !important;
}

I don't recall why I added the theme name to it.

Did the addition of a dialog class in ✨ Add a class to the dialog container RTBC help here in any way? Or would the patch by kpaxman still need to be applied to help resolve this issue?

For me, my patch is still needed. The linked ticket adds the class to the dialog box itself, not the HTML loaded in the iframe, and you can't target content inside the iframe using classes outside of it.

Class logic has been added now.

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