Merge remote-tracking branch 'origin/master' into feature/slicing

app/components/popup/modal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, DialogPanel } from '@headlessui/react'
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
 type ModalProperties = {
@@ -16,19 +16,18 @@ export default function PopupModal({
   return (
     <Dialog
       open={isOpen}
-      as="div"
-      className="relative z-30 focus:outline-none"
       onClose={onClose}
+      className="relative z-50"
+      transition
     >
-      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
-        <div className="flex min-h-full items-center justify-center sm:p-4">
-          <DialogPanel
-            transition
-            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
-          >
-            {children}
-          </DialogPanel>
-        </div>
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+          <div className="relative">{children}</div>
+        </DialogPanel>
       </div>
     </Dialog>
   )