maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix tooltip and modal stacking issues (#6491) 

* fix tooltip and modal stacking issues

* use z-index in larger screens and less

Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
Mohammed Cherfaoui 2023-01-22 16:01:25 +01:00 committed by GitHub
parent 7f044ff92f
commit a99e93a4bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/features/settings/layouts/SettingsLayout.tsx
View File

@ -165,7 +165,7 @@ const SettingsSidebarContainer = ({
return (
<nav
className={classNames(
"no-scrollbar fixed bottom-0 left-0 top-0 z-10 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 lg:sticky lg:flex",
"no-scrollbar fixed bottom-0 left-0 top-0 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"

12
packages/ui/components/dialog/Dialog.tsx
View File

@ -53,12 +53,7 @@ export function Dialog(props: DialogProps) {
}
}
return (
<DialogPrimitive.Root {...dialogProps}>
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
{children}
</DialogPrimitive.Root>
);
return <DialogPrimitive.Root {...dialogProps}>{children}</DialogPrimitive.Root>;
}
type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]> & {
size?: "xl" | "lg" | "md";
@ -75,12 +70,11 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
({ children, title, Icon, disableOverflow, type = "creation", ...props }, forwardedRef) => {
return (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
{/*zIndex one less than Toast */}
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 bg-gray-500 bg-opacity-80 transition-opacity" />
<DialogPrimitive.Content
{...props}
className={classNames(
"fadeIn fixed left-1/2 top-1/2 z-[9998] 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 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"

2
packages/ui/components/tooltip/Tooltip.tsx
View File

@ -31,7 +31,7 @@ export function Tooltip({
className={classNames(
side === "top" && "-mt-7",
side === "right" && "ml-2",
"relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg dark:bg-white dark:text-gray-600"
"relative rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg dark:bg-white dark:text-gray-600"
)}
side={side}
align="center"