fix(console): fix console z index issue on modals and banners (#6483)

packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss

@@ -1,11 +1,12 @@
 @use '@/scss/underscore' as _;
 
-.banner {
-  @include _.z-index(front);
+.container {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: _.unit(4);
+
+  .banner {
     font: var(--font-label-2);
     color: var(--color-text);
     display: flex;
@@ -14,4 +15,6 @@
     padding: _.unit(1.5) _.unit(4);
     background: var(--color-neutral-variant-90);
     border-radius: _.unit(4);
+    @include _.z-index(front);
+  }
 }

packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx

@@ -22,6 +22,7 @@ function CreateProductionTenantBanner() {
   }
 
   return createPortal(
+    <div className={styles.container}>
       <div className={styles.banner}>
         <CreateTenantModal
           isOpen={isCreateModalOpen}
@@ -41,6 +42,7 @@ function CreateProductionTenantBanner() {
         >
           {t('action')}
         </TextLink>
+      </div>
     </div>,
     document.body
   );

packages/console/src/scss/modal.module.scss

@@ -6,7 +6,7 @@
   inset: 0;
   overflow-y: auto;
   padding: _.unit(3) 0;
-  z-index: 101;
+  @include _.z-index(modal);
 }
 
 .content {
@@ -25,6 +25,7 @@
 .fullScreen {
   position: fixed;
   inset: 0;
+  @include _.z-index(modal);
 
   &:focus-visible {
     outline: none;

packages/console/src/scss/normalized.scss

@@ -46,10 +46,3 @@ input {
   height: 100%;
   flex: 1;
 }
-
-.ReactModalPortal {
-  position: relative;
-  // Set `z-index` for the portal to ensure it can be placed on the right layer among other
-  // top-level doms.
-  @include _.z-index(modal);
-}