fix app modal overlay + revert flexContent removal

shell/assets/styles/base/_variables.scss

@@ -39,14 +39,14 @@ $z-indexes: (
 
   mainHeader: 14,
 
-  modalOverlay: 20,
-  modalContent: 21,
-
   tooltip: 30,
 
   dropdownOverlay: 40,
   dropdownContent: 41,
 
+  modalOverlay: 42,
+  modalContent: 43,
+
   loadingMain: 51
 );
 

shell/components/AppModal.vue

@@ -208,7 +208,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 20;
+    z-index: z-index('modalOverlay');
 
     .modal-container {
       background-color: var(--modal-bg);

shell/components/ResourceDetail/index.vue

@@ -71,6 +71,11 @@ export default {
       default: null,
     },
 
+    flexContent: {
+      type:    Boolean,
+      default: false,
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -484,6 +489,7 @@ export default {
       :initial-value="initialModel"
       :live-value="liveModel"
       :real-mode="realMode"
+      :class="{'flex-content': flexContent}"
       @update:value="$emit('input', $event)"
       @set-subtype="setSubtype"
     />