Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-13 21:30:30 -05:00
Code Issues Activity

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

Browse source
This commit is contained in:
Charles Zhao 2024-08-21 13:27:56 +08:00 • committed by GitHub
parent 56649b570f
commit b8b77526e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 36 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

40
packages/console/src/containers/AppContent/TenantNotificationContainer/CreateProductionTenantBanner/index.tsx
View file

@ -22,25 +22,27 @@ function CreateProductionTenantBanner() {
} }
return createPortal( return createPortal(
<div className={styles.banner}> <div className={styles.container}>
<CreateTenantModal <div className={styles.banner}>
isOpen={isCreateModalOpen} <CreateTenantModal
onClose={async (tenant?: TenantResponse) => { isOpen={isCreateModalOpen}
setIsCreateModalOpen(false); onClose={async (tenant?: TenantResponse) => {
if (tenant) { setIsCreateModalOpen(false);
prependTenant(tenant); if (tenant) {
navigateTenant(tenant.id); prependTenant(tenant);
} navigateTenant(tenant.id);
}} }
/> }}
<span>{t('text')}</span> />
<TextLink <span>{t('text')}</span>
onClick={() => { <TextLink
setIsCreateModalOpen(true); onClick={() => {
}} setIsCreateModalOpen(true);
> }}
{t('action')} >
</TextLink> {t('action')}
</TextLink>
</div>
</div>, </div>,
document.body document.body
); );

3
packages/console/src/scss/modal.module.scss
View file

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

7
packages/console/src/scss/normalized.scss
View file

@ -46,10 +46,3 @@ input {
height: 100%; height: 100%;
flex: 1; 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);
}