Refactor z-index values for Dialog components in dialog.tsx and updat…

…e tailwind.config.ts
danskernesdigitalebibliotek · Dec 4, 2024 · a513758 · a513758
1 parent fdd7c16
commit a513758
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/components/shared/dialog/dialog.tsx b/components/shared/dialog/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      `z-50 fixed inset-0 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out
+      `z-dialog fixed inset-0 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out
       data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,
       className
     )}
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        `z-50 fixed left-[50%] top-[50%] m-auto grid w-[calc(100%-var(--grid-edge)*2)] max-w-[600px]
+        `z-dialog fixed left-[50%] top-[50%] m-auto grid w-[calc(100%-var(--grid-edge)*2)] max-w-[600px]
         translate-x-[-50%] translate-y-[-50%] gap-grid-edge rounded-md bg-background p-grid-edge shadow-lg
         duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out
         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -19,6 +19,7 @@ export const extendedTheme = {
   },
   zIndex: {
     "-1": "-1",
+    dialog: "50",
     drawer: "50",
     sheet: "50",
     "slide-select": "10",