From f0667493f714d8cfbd3b17ce1fa731529ab8894c Mon Sep 17 00:00:00 2001
From: Wilhelm Behncke <wilhelm.behncke@protonmail.com>
Date: Fri, 12 May 2023 13:50:38 +0200
Subject: [PATCH 1/2] BUGFIX: Let unapplied changes overlay cover everything
 except inspector

Also, this change adjusts the z-index of dialog overlays, so they cover
the top-most toolbar as well.
---
 cssVariables.css                                          | 6 +++---
 packages/build-essentials/src/styles/styleConstants.js    | 6 +++---
 .../src/Containers/RightSideBar/Inspector/index.js        | 8 +++++---
 .../src/Containers/RightSideBar/Inspector/style.css       | 4 ++--
 packages/react-ui-components/src/Dialog/style.css         | 2 +-
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/cssVariables.css b/cssVariables.css
index 7d5810e4a0..7992c310bb 100644
--- a/cssVariables.css
+++ b/cssVariables.css
@@ -31,21 +31,21 @@
     --zIndex-SecondaryInspector-Close: 3;
     --zIndex-SecondaryInspectorElevated-Context: 1;
     --zIndex-SecondaryInspectorElevated-DropdownContents: 2;
-    --zIndex-Dialog-Context: 1;
+    --zIndex-Dialog: 55;
     --zIndex-FullScreenClose-Context: 1;
     --zIndex-Drawer: 45;
     --zIndex-Bar-Context: 1;
     --zIndex-PrimaryToolbar: 40;
     --zIndex-CheckboxInput-Context: 1;
     --zIndex-DropdownContents-Context: 1;
-    --zIndex-SelectBoxContents: 40;
+    --zIndex-SelectBoxContents: 55;
     --zIndex-NotInlineEditableOverlay-Context: 1;
     --zIndex-CalendarFakeInputMirror-Context: 1;
     --zIndex-RdtPicker-Context: 1;
     --zIndex-SideBar-DropTargetBefore: 1;
     --zIndex-SideBar-DropTargetAfter: 2;
     --zIndex-WrapperDropdown-Context: 1;
-    --zIndex-UnappliedChangesOverlay-Context: 1;
+    --zIndex-UnappliedChangesOverlay: 55;
     --zIndex-NodeToolBar: 2147483646;
     --fontSize-Base: 14px;
     --fontSize-Small: 12px;
diff --git a/packages/build-essentials/src/styles/styleConstants.js b/packages/build-essentials/src/styles/styleConstants.js
index f4f170cc4a..689794f6e4 100644
--- a/packages/build-essentials/src/styles/styleConstants.js
+++ b/packages/build-essentials/src/styles/styleConstants.js
@@ -22,20 +22,20 @@ const config = {
         loadingIndicatorContainer: '5',
         secondaryInspector: ['context', 'iframe', 'close'],
         secondaryInspectorElevated: ['context', 'dropdownContents'],
-        dialog: ['context'],
+        dialog: '5',
         fullScreenClose: ['context'],
         drawer: ['context'],
         bar: ['context'],
         primaryToolbar: '4',
         checkboxInput: ['context'],
         dropdownContents: ['context'],
-        selectBoxContents: '4',
+        selectBoxContents: '5',
         notInlineEditableOverlay: ['context'],
         calendarFakeInputMirror: ['context'],
         rdtPicker: ['context'],
         sideBar: ['dropTargetBefore', 'dropTargetAfter'],
         wrapperDropdown: ['context'],
-        unappliedChangesOverlay: ['context'],
+        unappliedChangesOverlay: '5',
         nodeToolBar: '2147483646'
     },
     fontSize: {
diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
index e022a208fa..afbf2b13db 100644
--- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
+++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
@@ -1,4 +1,5 @@
 import React, {PureComponent} from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import {produce} from 'immer';
 import {mapValues} from 'lodash';
@@ -315,13 +316,14 @@ export default class Inspector extends PureComponent {
 
         return (
             <div id="neos-Inspector" className={style.inspector}>
-                {shouldShowUnappliedChangesOverlay &&
+                {shouldShowUnappliedChangesOverlay && ReactDOM.createPortal(
                     <div
                         role="button"
                         className={style.unappliedChangesOverlay}
                         onClick={this.handleEscape}
-                        />
-                }
+                        />,
+                    document.body
+                )}
                 <SelectedElement/>
                 <Tabs
                     className={style.tabs}
diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css b/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
index 3c638e6b36..1a1d1bd501 100644
--- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
+++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
@@ -49,7 +49,7 @@
     left: 0;
     width: calc(100% - var(--size-SidebarWidth));
     height: 100%;
-    z-index: var(--zIndex-UnappliedChangesOverlay-Context);
+    z-index: var(--zIndex-UnappliedChangesOverlay);
     &,
     &::after {
         position: fixed;
@@ -59,7 +59,7 @@
     &::after {
         content: '';
         top: 0;
-        right: 0;
+        right: calc(-1 * var(--size-SidebarWidth));
         height: var(--spacing-GoldenUnit);
         width: var(--size-SidebarWidth);
     }
diff --git a/packages/react-ui-components/src/Dialog/style.css b/packages/react-ui-components/src/Dialog/style.css
index 7699c482c8..5ba13c43bb 100644
--- a/packages/react-ui-components/src/Dialog/style.css
+++ b/packages/react-ui-components/src/Dialog/style.css
@@ -10,7 +10,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: var(--zIndex-Dialog-Context);
+    z-index: var(--zIndex-Dialog);
     width: 100vw;
     height: 100vh;
     background: rgba(#000, .8);

From c01316e5fd7e75eac15e6856f4202df0618db84a Mon Sep 17 00:00:00 2001
From: Wilhelm Behncke <wilhelm.behncke@protonmail.com>
Date: Mon, 12 Jun 2023 16:21:51 +0200
Subject: [PATCH 2/2] TASK: Let unapplied changes overlay cover selected
 element drop down as well

---
 .../neos-ui/src/Containers/RightSideBar/Inspector/style.css  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css b/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
index 1a1d1bd501..a3d56d157e 100644
--- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
+++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
@@ -59,8 +59,9 @@
     &::after {
         content: '';
         top: 0;
-        right: calc(-1 * var(--size-SidebarWidth));
-        height: var(--spacing-GoldenUnit);
+        right: 0;
+        /* 101px accounts for the "Selected element" drop down */
+        height: calc(var(--spacing-GoldenUnit) + 101px);
         width: var(--size-SidebarWidth);
     }
 }