refactor(console): set portal z-index properly (#5948)

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

@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .banner {
-  @include _.z-index(modal);
+  @include _.z-index(front);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);

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

@@ -1,5 +1,6 @@
 import { TenantTag } from '@logto/schemas';
 import { useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
 import { type TenantResponse } from '@/cloud/types/router';
@@ -20,7 +21,7 @@ function CreateProductionTenantBanner() {
     return null;
   }
 
-  return (
+  return createPortal(
     <div className={styles.banner}>
       <CreateTenantModal
         isOpen={isCreateModalOpen}
@@ -40,7 +41,8 @@ function CreateProductionTenantBanner() {
       >
         {t('action')}
       </TextLink>
-    </div>
+    </div>,
+    document.body
   );
 }
 

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

@@ -25,7 +25,6 @@
 .fullScreen {
   position: fixed;
   inset: 0;
-  z-index: 100;
 
   &:focus-visible {
     outline: none;

packages/console/src/scss/normalized.scss

@@ -46,3 +46,10 @@ 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);
+}