fix z-index issue (#172)

stripe · Jun 20, 2024 · 454c4fe · 454c4fe
1 parent 07bd4d7
commit 454c4fe
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/app/components/Screen.tsx b/app/components/Screen.tsx
@@ -24,7 +24,7 @@ export default function Screen({
         {/* Tools Panel container */}
         <div
           className={`${open ? 'translate-y-0 md:translate-x-0' : 'translate-y-full md:-translate-x-full md:translate-y-0'}
-          z-45 fixed bottom-0 w-full overflow-hidden rounded-t-2xl bg-screen-foreground shadow-[0px_-4px_32px_rgba(0,0,0,0.15)] transition duration-500 ease-in-out md:h-screen md:w-[300px] md:rounded-none md:border-r md:shadow-none`}
+          fixed bottom-0 z-50 w-full overflow-hidden rounded-t-2xl bg-screen-foreground shadow-[0px_-4px_32px_rgba(0,0,0,0.15)] transition duration-500 ease-in-out md:h-screen md:w-[300px] md:rounded-none md:border-r md:shadow-none`}
         >
           <ToolsPanel />
         </div>

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-dialog-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-[60] bg-dialog-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 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 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-[60] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 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 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}