Add section

Another issue with this.

If i have a layout inside a layout i cannot see the controls of the first level layout. But when saving the .lpb-layout with padding 0 of the modules/contrib/mercury_editor/build/css/preview-screen.css disapears and with the padding 20px i can see well the layout controls.

Provisional solution:

function hook_library_info_alter(&$libraries, $extension) {
  if(!empty($libraries['preview_screen'])) {
    unset($libraries["preview_screen"]["css"]["component"]["build/css/preview-screen.css"]);
  }
}

Another option is changing the min-height to 60px, from layout paragraphs builder.css => .js-lpb-region class. However, this still takes away how close it resembles the final rendering.

Another provisional solution is to only add the padding when hovering over a layout section:

.lpb-layout:hover {
  padding: 40px 0;
}

This keeps the preview closer to the final version.

Mercury Editor 2.2 added new animation during which padding is added around controls. There was an initial issue regarding this, that has since been fixed ( #3498275 Reduce content reflow during animation on rollover ✨ Reduce content reflow during animation on rollover Active ). So I think this issue can be closed now as the solution is to update to 2.2