From 8c35f390088067e5078ff60318694e84a67240e1 Mon Sep 17 00:00:00 2001
From: Hrvoje Vucic <hvucic@extensionengine.com>
Date: Tue, 25 Jan 2022 13:24:30 +0100
Subject: [PATCH 1/2] Fix tce-audio z-index mixed with absolute position issue

---
 client/components/common/tce-core/PreviewOverlay.vue     | 1 +
 .../components/content-elements/tce-audio/edit/index.vue | 1 -
 .../components/content-elements/tce-embed/edit/index.vue | 9 ++-------
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/client/components/common/tce-core/PreviewOverlay.vue b/client/components/common/tce-core/PreviewOverlay.vue
index 9957007c9..4ec609f4d 100644
--- a/client/components/common/tce-core/PreviewOverlay.vue
+++ b/client/components/common/tce-core/PreviewOverlay.vue
@@ -1,6 +1,7 @@
 <template functional>
   <v-overlay
     :value="props.show"
+    z-index="0"
     opacity="0.9"
     absolute>
     <button class="message pa-2 grey--text text--lighten-2">
diff --git a/client/components/content-elements/tce-audio/edit/index.vue b/client/components/content-elements/tce-audio/edit/index.vue
index 9418cf7b0..9ea4b9695 100644
--- a/client/components/content-elements/tce-audio/edit/index.vue
+++ b/client/components/content-elements/tce-audio/edit/index.vue
@@ -87,7 +87,6 @@ export default {
   justify-content: center;
   position: relative;
   min-height: 4.5rem;
-  z-index: 999;
 
   ::v-deep {
     .element-placeholder {
diff --git a/client/components/content-elements/tce-embed/edit/index.vue b/client/components/content-elements/tce-embed/edit/index.vue
index 42e18663f..9b191d60c 100644
--- a/client/components/content-elements/tce-embed/edit/index.vue
+++ b/client/components/content-elements/tce-embed/edit/index.vue
@@ -9,7 +9,7 @@
       icon="mdi-iframe"
       active-placeholder="Use toolbar to enter the url"
       active-icon="mdi-arrow-up" />
-    <div v-else>
+    <template v-else>
       <div class="content">
         <preview-overlay :show="!isDisabled && !isFocused" />
         <!-- Dragging iframes is not supported inside sortablejs container! -->
@@ -22,7 +22,7 @@
           class="content">
         </iframe>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -67,11 +67,6 @@ export default {
 }
 
 .content {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
 }

From 60619fadd56060baa31ef194306593241079d10d Mon Sep 17 00:00:00 2001
From: Hrvoje Vucic <hvucic@extensionengine.com>
Date: Tue, 25 Jan 2022 13:31:47 +0100
Subject: [PATCH 2/2] Remove unnecessary template tag

---
 .../content-elements/tce-embed/edit/index.vue | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/components/content-elements/tce-embed/edit/index.vue b/client/components/content-elements/tce-embed/edit/index.vue
index 9b191d60c..4aa9679be 100644
--- a/client/components/content-elements/tce-embed/edit/index.vue
+++ b/client/components/content-elements/tce-embed/edit/index.vue
@@ -9,20 +9,18 @@
       icon="mdi-iframe"
       active-placeholder="Use toolbar to enter the url"
       active-icon="mdi-arrow-up" />
-    <template v-else>
-      <div class="content">
-        <preview-overlay :show="!isDisabled && !isFocused" />
-        <!-- Dragging iframes is not supported inside sortablejs container! -->
-        <iframe
-          v-if="!isDragged"
-          ref="frame"
-          :src="url"
-          frameborder="0"
-          sandbox="allow-forms allow-same-origin allow-scripts"
-          class="content">
-        </iframe>
-      </div>
-    </template>
+    <div v-else class="content">
+      <preview-overlay :show="!isDisabled && !isFocused" />
+      <!-- Dragging iframes is not supported inside sortablejs container! -->
+      <iframe
+        v-if="!isDragged"
+        ref="frame"
+        :src="url"
+        frameborder="0"
+        sandbox="allow-forms allow-same-origin allow-scripts"
+        class="content">
+      </iframe>
+    </div>
   </div>
 </template>