🎨 Fix dialog position and styles

This commit is contained in:
Luke Vella 2024-05-12 14:49:12 +08:00
parent 94449357a6
commit edefedd5c5

View file

@ -18,7 +18,7 @@ const DialogPortal = ({
...props
}: DialogPrimitive.DialogPortalProps) => (
<DialogPrimitive.Portal className={cn(className)} {...props}>
<div className="fixed inset-0 z-50 flex items-end justify-center pb-4 sm:items-center">
<div className="fixed inset-0 z-50 flex items-start justify-center p-3 sm:items-center">
{children}
</div>
</DialogPrimitive.Portal>
@ -53,7 +53,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"animate-in data-[state=open]:fade-in shadow-huge z-50 grid w-full translate-y-4 gap-4 overflow-hidden bg-gray-50 p-5 sm:rounded-md",
"animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-8 shadow-huge z-50 grid w-full translate-y-0 gap-4 overflow-hidden rounded-md bg-gray-50 p-4 lg:p-5",
{
"sm:max-w-sm": size === "sm",
"sm:max-w-md": size === "md",