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

logto-io · Aug 21, 2024 · 26620c9 · 26620c9
1 parent 332131a
commit 26620c9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 37 deletions.
diff --git a/...ers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss b/...ers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.module.scss
@@ -1,17 +1,20 @@
 @use '@/scss/underscore' as _;
 
-.banner {
-  @include _.z-index(front);
+.container {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: _.unit(4);
-  font: var(--font-label-2);
-  color: var(--color-text);
-  display: flex;
-  align-items: center;
-  gap: _.unit(2.5);
-  padding: _.unit(1.5) _.unit(4);
-  background: var(--color-neutral-variant-90);
-  border-radius: _.unit(4);
+
+  .banner {
+    font: var(--font-label-2);
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    gap: _.unit(2.5);
+    padding: _.unit(1.5) _.unit(4);
+    background: var(--color-neutral-variant-90);
+    border-radius: _.unit(4);
+    @include _.z-index(front);
+  }
 }
diff --git a/.../containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx b/.../containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx
@@ -22,25 +22,27 @@ function CreateProductionTenantBanner() {
   }
 
   return createPortal(
-    <div className={styles.banner}>
-      <CreateTenantModal
-        isOpen={isCreateModalOpen}
-        onClose={async (tenant?: TenantResponse) => {
-          setIsCreateModalOpen(false);
-          if (tenant) {
-            prependTenant(tenant);
-            navigateTenant(tenant.id);
-          }
-        }}
-      />
-      <span>{t('text')}</span>
-      <TextLink
-        onClick={() => {
-          setIsCreateModalOpen(true);
-        }}
-      >
-        {t('action')}
-      </TextLink>
+    <div className={styles.container}>
+      <div className={styles.banner}>
+        <CreateTenantModal
+          isOpen={isCreateModalOpen}
+          onClose={async (tenant?: TenantResponse) => {
+            setIsCreateModalOpen(false);
+            if (tenant) {
+              prependTenant(tenant);
+              navigateTenant(tenant.id);
+            }
+          }}
+        />
+        <span>{t('text')}</span>
+        <TextLink
+          onClick={() => {
+            setIsCreateModalOpen(true);
+          }}
+        >
+          {t('action')}
+        </TextLink>
+      </div>
     </div>,
     document.body
   );

diff --git a/packages/console/src/scss/modal.module.scss b/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;

diff --git a/packages/console/src/scss/normalized.scss b/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);
-}