Fix modal z index issue in settings (#7578)

* feat: add z-index to modal

* feat: reduce z-index

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/7448/head^2
Nafees Nazik 2023-03-08 16:29:06 +05:30 committed by GitHub
parent 34d3bdf868
commit d28c914d3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions

View File

@ -174,7 +174,7 @@ const SettingsSidebarContainer = ({
return (
<nav
className={classNames(
"no-scrollbar fixed bottom-0 left-0 top-0 z-50 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll bg-gray-50 px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
"no-scrollbar fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll bg-gray-50 px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
className,
navigationIsOpenedOnMobile
? "translate-x-0 opacity-100"

View File

@ -73,11 +73,11 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
({ children, title, Icon, enableOverflow, type = "creation", ...props }, forwardedRef) => {
return (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 bg-gray-500 bg-opacity-80 transition-opacity" />
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-50 bg-gray-500 bg-opacity-80 transition-opacity" />
<DialogPrimitive.Content
{...props}
className={classNames(
"fadeIn fixed left-1/2 top-1/2 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
"fadeIn fixed left-1/2 top-1/2 z-50 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
props.size == "xl"
? "p-8 sm:max-w-[90rem]"
: props.size == "lg"