BUGFIX: Let unapplied changes overlay cover everything except inspector

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;

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: {

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}

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);
     }

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);