From 0a4cc27a5d01fbd4be9828e55a8e2a8d52c12f2b Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 14 Sep 2023 13:17:35 +0200
Subject: [PATCH] V12: Property editors should only contain layout when in
 preview mode (#14796)

* Revert "Make sure the property editor layout is contained within its container (prevent Z-index bleed-through) (#13583)"

This reverts commit 8463d906a747868ddbda3b1c01465f6cee1a589a.

* remove seemingly unused attribute readonly

* contain everything with contain:layout

this is set if the property editor is in preview mode to make sure all overlays work

* Revert "remove seemingly unused attribute readonly"

This reverts commit 7a2743e8f664e707e8df5022fe754dfd77c508ea.
---
 .../src/less/components/umb-property-editor.less              | 4 ++++
 .../src/views/components/property/umb-property-editor.html    | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less
index 6e16e76295..c34ada479e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less
@@ -1,6 +1,10 @@
 .umb-property-editor {
   position: relative;
   contain: style;
+  
+  &.is-preview {
+    contain: layout;
+  }
 }
 
 .umb-property-editor--preview {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
index 8667fb84c2..b2387e230a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
@@ -1,4 +1,4 @@
-<div class="umb-property-editor db">
+<div class="umb-property-editor db" ng-class="{'is-preview': preview}">
 
     <div ng-if="preview && allowUnlock" class="umb-property-editor__lock-overlay-container">
         <div class="umb-property-editor__lock-overlay">
@@ -13,7 +13,7 @@
             <umb-button button-style="success" type="button" action="unlock()" label-key="general_edit" size="xxs"></umb-button>
         </div>
     </div>
-    
+
     <!-- layer to prevent clicks on elements with high z-index-->
     <div ng-if="preview" class="umb-property-editor__preview-overlay"></div>