From 00033193e0863c13b710745f3138169d3645f731 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sun, 13 Oct 2024 20:09:16 -0400
Subject: [PATCH 01/17] feat: create ShadCN modal with temporary dialog

---
 .../ui/__stories__/Modal.stories.tsx          |  33 ++++
 src/components/ui/dialog-modal.tsx            | 186 ++++++++++++++++++
 2 files changed, 219 insertions(+)
 create mode 100644 src/components/ui/__stories__/Modal.stories.tsx
 create mode 100644 src/components/ui/dialog-modal.tsx

diff --git a/src/components/ui/__stories__/Modal.stories.tsx b/src/components/ui/__stories__/Modal.stories.tsx
new file mode 100644
index 00000000000..679168e026b
--- /dev/null
+++ b/src/components/ui/__stories__/Modal.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+
+import ModalComponent from "../dialog-modal"
+
+const meta = {
+  title: "Molecules/Overlay Content/ShadCN Modal",
+  component: ModalComponent,
+  args: {
+    defaultOpen: true,
+    title: "Modal Title",
+    children:
+      "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
+    actionButton: {
+      label: "Save",
+      onClick: fn(),
+    },
+  },
+} satisfies Meta<typeof ModalComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Modal: Story = {}
+
+export const Full: Story = {
+  args: {
+    contentProps: {
+      size: "xl",
+    },
+  },
+}
diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
new file mode 100644
index 00000000000..3747428dc19
--- /dev/null
+++ b/src/components/ui/dialog-modal.tsx
@@ -0,0 +1,186 @@
+import * as React from "react"
+import { MdClose } from "react-icons/md"
+import { tv, type VariantProps } from "tailwind-variants"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Button } from "./buttons/Button"
+import { Center, Flex } from "./flex"
+
+import { useDisclosure } from "@/hooks/useDisclosure"
+
+const dialogVariant = tv({
+  slots: {
+    content:
+      "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-white p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none",
+    overlay: "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70",
+    header: "relative pe-12",
+    title: "text-2xl",
+    footer: "pt-8",
+    close: "text-md size-8",
+  },
+  variants: {
+    size: {
+      md: {
+        content: "max-w-xl",
+      },
+      xl: {
+        content: "max-w-[1004px]",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(dialogVariant().overlay(), className)}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+type DialogContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof dialogVariant>
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay className={dialogVariant().overlay()} />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(dialogVariant().content({ size }), className)}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn(dialogVariant().header(), className)} {...props}>
+    {children}
+    <Center className="absolute end-0 top-0" asChild>
+      <DialogPrimitive.Close className={dialogVariant().close()}>
+        <MdClose />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </Center>
+  </div>
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn(dialogVariant().footer(), className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(dialogVariant().title(), className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & {
+  children?: React.ReactNode
+  title?: React.ReactNode
+  actionButton?: {
+    label: string
+    onClick: () => void
+  }
+  contentProps?: DialogContentProps
+}
+
+const Modal = ({
+  children,
+  title,
+  actionButton,
+  contentProps,
+  defaultOpen,
+  ...restProps
+}: ModalProps) => {
+  const { onClose, isOpen, setValue } = useDisclosure(defaultOpen)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setValue} {...restProps}>
+      <DialogContent {...contentProps}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>{children}</DialogDescription>
+        {actionButton && (
+          <DialogFooter>
+            <Flex className="justify-end gap-2">
+              <Button onClick={onClose} variant="outline" isSecondary>
+                Cancel
+              </Button>
+              <Button onClick={actionButton.onClick}>
+                {actionButton.label}
+              </Button>
+            </Flex>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default Modal
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

From 85ec9460c478b3eb87341d21d956fb49c0b45eee Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Tue, 15 Oct 2024 23:26:51 -0400
Subject: [PATCH 02/17] chore(ui/Modal): rename "Full" story to "Xl"

---
 src/components/ui/__stories__/Modal.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/__stories__/Modal.stories.tsx b/src/components/ui/__stories__/Modal.stories.tsx
index 679168e026b..ae11ca8f1c6 100644
--- a/src/components/ui/__stories__/Modal.stories.tsx
+++ b/src/components/ui/__stories__/Modal.stories.tsx
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof meta>
 
 export const Modal: Story = {}
 
-export const Full: Story = {
+export const Xl: Story = {
   args: {
     contentProps: {
       size: "xl",

From 3c246eff58fdf242bd9ee1756bbe0afa56fc7ea1 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Wed, 16 Oct 2024 23:44:18 -0400
Subject: [PATCH 03/17] refactor(ui/dialog-modal): create provider for variant
 styles

---
 .../ui/__stories__/Modal.stories.tsx          |   4 +-
 src/components/ui/dialog-modal.tsx            | 133 ++++++++++++------
 2 files changed, 88 insertions(+), 49 deletions(-)

diff --git a/src/components/ui/__stories__/Modal.stories.tsx b/src/components/ui/__stories__/Modal.stories.tsx
index ae11ca8f1c6..6f044f8b5f5 100644
--- a/src/components/ui/__stories__/Modal.stories.tsx
+++ b/src/components/ui/__stories__/Modal.stories.tsx
@@ -26,8 +26,6 @@ export const Modal: Story = {}
 
 export const Xl: Story = {
   args: {
-    contentProps: {
-      size: "xl",
-    },
+    size: "xl",
   },
 }
diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index 3747428dc19..c084e9a6018 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -29,13 +29,31 @@ const dialogVariant = tv({
         content: "max-w-[1004px]",
       },
     },
+    isSimulator: {
+      true: {},
+    },
   },
   defaultVariants: {
     size: "md",
   },
 })
 
-const Dialog = DialogPrimitive.Root
+type DialogVariants = VariantProps<typeof dialogVariant>
+
+const DialogStylesContext = React.createContext(dialogVariant())
+
+const useDialogStyles = () => React.useContext(DialogStylesContext)
+
+type DialogProps = DialogPrimitive.DialogProps & DialogVariants
+
+const Dialog = ({ size, isSimulator, ...props }: DialogProps) => {
+  const styles = dialogVariant({ size, isSimulator })
+  return (
+    <DialogStylesContext.Provider value={styles}>
+      <DialogPrimitive.Root {...props} />
+    </DialogStylesContext.Provider>
+  )
+}
 
 const DialogTrigger = DialogPrimitive.Trigger
 
@@ -46,72 +64,84 @@ const DialogClose = DialogPrimitive.Close
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(dialogVariant().overlay(), className)}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  const { overlay } = useDialogStyles()
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(overlay(), className)}
+      {...props}
+    />
+  )
+})
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 type DialogContentProps = React.ComponentPropsWithoutRef<
   typeof DialogPrimitive.Content
-> &
-  VariantProps<typeof dialogVariant>
+>
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, size, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay className={dialogVariant().overlay()} />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(dialogVariant().content({ size }), className)}
-      {...props}
-    >
-      {children}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
+>(({ className, children, ...props }, ref) => {
+  const { content } = useDialogStyles()
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(content(), className)}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+})
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
   className,
   children,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn(dialogVariant().header(), className)} {...props}>
-    {children}
-    <Center className="absolute end-0 top-0" asChild>
-      <DialogPrimitive.Close className={dialogVariant().close()}>
-        <MdClose />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </Center>
-  </div>
-)
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { header, close } = useDialogStyles()
+  return (
+    <div className={cn(header(), className)} {...props}>
+      {children}
+      <Center className="absolute end-0 top-0" asChild>
+        <DialogPrimitive.Close className={close()}>
+          <MdClose />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </Center>
+    </div>
+  )
+}
 DialogHeader.displayName = "DialogHeader"
 
 const DialogFooter = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn(dialogVariant().footer(), className)} {...props} />
-)
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { footer } = useDialogStyles()
+  return <div className={cn(footer(), className)} {...props} />
+}
 DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(dialogVariant().title(), className)}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  const { title } = useDialogStyles()
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn(title(), className)}
+      {...props}
+    />
+  )
+})
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
@@ -126,9 +156,10 @@ const DialogDescription = React.forwardRef<
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
-export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & {
+export type ModalProps = Omit<DialogProps, "open"> & {
   children?: React.ReactNode
   title?: React.ReactNode
+  onClose?: () => void
   actionButton?: {
     label: string
     onClick: () => void
@@ -142,9 +173,19 @@ const Modal = ({
   actionButton,
   contentProps,
   defaultOpen,
+  onClose,
   ...restProps
 }: ModalProps) => {
-  const { onClose, isOpen, setValue } = useDisclosure(defaultOpen)
+  const {
+    onClose: onDisclosureClose,
+    isOpen,
+    setValue,
+  } = useDisclosure(defaultOpen)
+
+  const handleClose = () => {
+    onClose?.()
+    onDisclosureClose()
+  }
 
   return (
     <Dialog open={isOpen} onOpenChange={setValue} {...restProps}>
@@ -156,7 +197,7 @@ const Modal = ({
         {actionButton && (
           <DialogFooter>
             <Flex className="justify-end gap-2">
-              <Button onClick={onClose} variant="outline" isSecondary>
+              <Button onClick={handleClose} variant="outline" isSecondary>
                 Cancel
               </Button>
               <Button onClick={actionButton.onClick}>

From 8b9bc21659fed352e5837202f7dd5afad4f20ced Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sun, 10 Nov 2024 22:06:14 -0500
Subject: [PATCH 04/17] refactor(QuizzesModal): migrate to dialog-modal

---
 src/components/Quiz/QuizzesModal.tsx | 37 ++++++++++++++++------------
 src/components/ui/dialog-modal.tsx   | 17 +++++++------
 src/pages/quizzes.tsx                |  7 +++---
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/components/Quiz/QuizzesModal.tsx b/src/components/Quiz/QuizzesModal.tsx
index 639e1458274..253310af453 100644
--- a/src/components/Quiz/QuizzesModal.tsx
+++ b/src/components/Quiz/QuizzesModal.tsx
@@ -1,12 +1,15 @@
-import { Center, ModalContentProps } from "@chakra-ui/react"
-
 import { QuizStatus } from "@/lib/types"
 
-import Modal from "../Modal"
+import { cn } from "@/lib/utils/cn"
+
+import Modal, { type ModalProps } from "../ui/dialog-modal"
+import { Center } from "../ui/flex"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 
 type QuizzesModalProps = {
   isQuizModalOpen: boolean
-  onQuizModalClose: () => void
+  onQuizModalOpenChange: (open: boolean) => void
   children: React.ReactNode
   quizStatus: QuizStatus
 }
@@ -15,30 +18,32 @@ const QuizzesModal = ({
   children,
   quizStatus,
   isQuizModalOpen,
-  onQuizModalClose,
+  onQuizModalOpenChange,
   ...props
 }: QuizzesModalProps) => {
-  const getStatusColor = (): ModalContentProps["bg"] => {
+  const getStatusClass = () => {
     if (quizStatus === "neutral") {
-      return "background.base"
+      return "bg-background"
     }
     if (quizStatus === "success") {
-      return "success.neutral"
+      return "bg-success"
     }
-    return "error.neutral"
+    return "bg-error"
   }
 
+  const size = useBreakpointValue<ModalProps["size"]>({ base: "xl", md: "md" })!
+
   return (
     <Modal
-      isOpen={isQuizModalOpen}
-      onClose={onQuizModalClose}
-      size={{ base: "full", md: "xl" }}
-      contentProps={{ bg: getStatusColor() }}
+      open={isQuizModalOpen}
+      onOpenChange={onQuizModalOpenChange}
+      size={size}
+      contentProps={{
+        className: getStatusClass(),
+      }}
       {...props}
     >
-      <Center m={0} bg={getStatusColor()}>
-        {children}
-      </Center>
+      <Center className={cn("m-0", getStatusClass())}>{children}</Center>
     </Modal>
   )
 }
diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index c084e9a6018..9f65511a993 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -13,12 +13,13 @@ import { useDisclosure } from "@/hooks/useDisclosure"
 const dialogVariant = tv({
   slots: {
     content:
-      "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-white p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none",
-    overlay: "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70",
+      "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-white p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
+    overlay:
+      "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70 z-overlay",
     header: "relative pe-12",
     title: "text-2xl",
     footer: "pt-8",
-    close: "text-md size-8",
+    close: "text-md size-8 z-10",
   },
   variants: {
     size: {
@@ -156,7 +157,7 @@ const DialogDescription = React.forwardRef<
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
-export type ModalProps = Omit<DialogProps, "open"> & {
+export type ModalProps = DialogProps & {
   children?: React.ReactNode
   title?: React.ReactNode
   onClose?: () => void
@@ -197,9 +198,11 @@ const Modal = ({
         {actionButton && (
           <DialogFooter>
             <Flex className="justify-end gap-2">
-              <Button onClick={handleClose} variant="outline" isSecondary>
-                Cancel
-              </Button>
+              <DialogClose asChild>
+                <Button onClick={handleClose} variant="outline" isSecondary>
+                  Cancel
+                </Button>
+              </DialogClose>
               <Button onClick={actionButton.onClick}>
                 {actionButton.label}
               </Button>
diff --git a/src/pages/quizzes.tsx b/src/pages/quizzes.tsx
index 408a7d335ce..5e690b30fb5 100644
--- a/src/pages/quizzes.tsx
+++ b/src/pages/quizzes.tsx
@@ -3,7 +3,7 @@ import { GetStaticProps, InferGetStaticPropsType, NextPage } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { FaGithub } from "react-icons/fa"
-import { Box, Flex, Icon, Stack, Text, useDisclosure } from "@chakra-ui/react"
+import { Box, Flex, Icon, Stack, Text } from "@chakra-ui/react"
 
 import { BasePageProps, Lang, QuizKey, QuizStatus } from "@/lib/types"
 
@@ -28,6 +28,7 @@ import { ethereumBasicsQuizzes, usingEthereumQuizzes } from "@/data/quizzes"
 
 import { INITIAL_QUIZ } from "@/lib/constants"
 
+import { useDisclosure } from "@/hooks/useDisclosure"
 import HeroImage from "@/public/images/heroes/quizzes-hub-hero.png"
 
 const handleGHAdd = () =>
@@ -65,7 +66,7 @@ const QuizzesHubPage: NextPage<
   const [userStats, updateUserStats] = useLocalQuizData()
   const [quizStatus, setQuizStatus] = useState<QuizStatus>("neutral")
   const [currentQuiz, setCurrentQuiz] = useState<QuizKey>(INITIAL_QUIZ)
-  const { onOpen, isOpen, onClose } = useDisclosure()
+  const { onOpen, isOpen, setValue } = useDisclosure()
 
   const commonQuizListProps = useMemo(
     () => ({
@@ -91,7 +92,7 @@ const QuizzesHubPage: NextPage<
       />
       <QuizzesModal
         isQuizModalOpen={isOpen}
-        onQuizModalClose={onClose}
+        onQuizModalOpenChange={setValue}
         quizStatus={quizStatus}
       >
         <QuizWidget

From 27fd3f830815e513a85ff2de1e1f4e4f301e1105 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sun, 10 Nov 2024 23:46:19 -0500
Subject: [PATCH 05/17] refactor(Simulator): migrate to dialog-modal

---
 src/components/Simulator/SimulatorModal.tsx | 34 +++------------------
 src/components/Simulator/index.tsx          | 23 ++++++++------
 src/components/ui/dialog-modal.tsx          | 11 ++++---
 3 files changed, 25 insertions(+), 43 deletions(-)

diff --git a/src/components/Simulator/SimulatorModal.tsx b/src/components/Simulator/SimulatorModal.tsx
index 1d2d7dea07f..c38ef765efd 100644
--- a/src/components/Simulator/SimulatorModal.tsx
+++ b/src/components/Simulator/SimulatorModal.tsx
@@ -1,35 +1,9 @@
 import React from "react"
-import {
-  type ModalContentProps,
-  type ModalProps,
-  UseDisclosureReturn,
-} from "@chakra-ui/react"
 
-import Modal from "../Modal"
+import Modal, { type ModalProps } from "../ui/dialog-modal"
 
-type SimulatorModalProps = ModalContentProps &
-  Pick<ModalProps, "size"> & {
-    isOpen: UseDisclosureReturn["isOpen"]
-    onClose: UseDisclosureReturn["onClose"]
-    children?: React.ReactNode
-  }
+type SimulatorModalProps = Omit<ModalProps, "size">
 
-export const SimulatorModal = ({
-  isOpen,
-  onClose,
-  children,
-  ...restProps
-}: SimulatorModalProps) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      isCentered
-      size="full"
-      scrollBehavior="outside"
-      contentProps={restProps}
-    >
-      {children}
-    </Modal>
-  )
+export const SimulatorModal = (props: SimulatorModalProps) => {
+  return <Modal size="xl" {...props} isSimulator />
 }
diff --git a/src/components/Simulator/index.tsx b/src/components/Simulator/index.tsx
index 64acaea2863..2d21463d214 100644
--- a/src/components/Simulator/index.tsx
+++ b/src/components/Simulator/index.tsx
@@ -4,6 +4,8 @@ import { Flex, type FlexProps, Grid } from "@chakra-ui/react"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import type { ModalProps } from "../ui/dialog-modal"
+
 import { PATH_ID_QUERY_PARAM, SIMULATOR_ID } from "./constants"
 import { Explanation } from "./Explanation"
 import type {
@@ -41,14 +43,17 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
   }
 
   // When simulator closed: log event, clear URL params and close modal
-  const onClose = (): void => {
-    trackCustomEvent({
-      eventCategory: "simulator",
-      eventAction: `${pathId}_click`,
-      eventName: `close-from-step-${step + 1}`,
-    })
-    // Clearing URL Params will reset pathId, and close modal
-    clearUrlParams()
+  const onClose: ModalProps["onOpenChange"] = (open) => {
+    console.log("🚀 ~ Simulator ~ open:", open)
+    if (!open) {
+      trackCustomEvent({
+        eventCategory: "simulator",
+        eventAction: `${pathId}_click`,
+        eventName: `close-from-step-${step + 1}`,
+      })
+      // Clearing URL Params will reset pathId, and close modal
+      clearUrlParams()
+    }
   }
 
   // Remove URL search param if invalid pathId
@@ -181,7 +186,7 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
           })}
         </Flex>
       </Flex>
-      <SimulatorModal isOpen={isOpen} onClose={onClose}>
+      <SimulatorModal open={isOpen} onOpenChange={onClose}>
         <Template>
           {explanation ? (
             <Explanation
diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index 9f65511a993..b10d9378f74 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -19,7 +19,7 @@ const dialogVariant = tv({
     header: "relative pe-12",
     title: "text-2xl",
     footer: "pt-8",
-    close: "text-md size-8 z-10",
+    close: "text-md size-8 z-10 absolute end-0 top-0",
   },
   variants: {
     size: {
@@ -31,7 +31,10 @@ const dialogVariant = tv({
       },
     },
     isSimulator: {
-      true: {},
+      true: {
+        close: "static ms-auto",
+        header: "pe-0",
+      },
     },
   },
   defaultVariants: {
@@ -110,8 +113,8 @@ const DialogHeader = ({
   return (
     <div className={cn(header(), className)} {...props}>
       {children}
-      <Center className="absolute end-0 top-0" asChild>
-        <DialogPrimitive.Close className={close()}>
+      <Center className={close()} asChild>
+        <DialogPrimitive.Close>
           <MdClose />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

From a8405f2522232ee7223a95cdeb5fc92bc70602a1 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 11 Nov 2024 10:37:06 -0500
Subject: [PATCH 06/17] refactor(FileContributors): migrate to dialog-modal

---
 src/components/FileContributors.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/FileContributors.tsx b/src/components/FileContributors.tsx
index f98e4c6eefe..1e727925591 100644
--- a/src/components/FileContributors.tsx
+++ b/src/components/FileContributors.tsx
@@ -12,12 +12,15 @@ import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
 import { Button } from "@/components/Buttons"
 import InlineLink from "@/components/Link"
-import Modal from "@/components/Modal"
 import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import Modal from "./ui/dialog-modal"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   <UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
     {children}
@@ -61,12 +64,14 @@ const FileContributors = ({
         date: Date.now().toString(),
       } as FileContributor)
 
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
+
   return (
     <>
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        size={{ base: "full", md: "xl" }}
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
         title={<Translation id="contributors" />}
       >
         <Translation id="contributors-thanks" />

From 66a05165846456fdfa194b71b9e390fd6764fa21 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 11 Nov 2024 10:58:40 -0500
Subject: [PATCH 07/17] fix(dialog-modal): set dynamic bg color to modal
 content

---
 src/components/ui/dialog-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index b10d9378f74..a55fa1169b8 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -13,7 +13,7 @@ import { useDisclosure } from "@/hooks/useDisclosure"
 const dialogVariant = tv({
   slots: {
     content:
-      "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-white p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
+      "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
     overlay:
       "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70 z-overlay",
     header: "relative pe-12",

From 902f28cb712c83dc947fc8cb40d8a5bbd81ca3e1 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 11 Nov 2024 10:59:10 -0500
Subject: [PATCH 08/17] refactor(pages/developers/tutorials): migrate to
 dialog-modal

---
 src/pages/developers/tutorials.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/pages/developers/tutorials.tsx b/src/pages/developers/tutorials.tsx
index df9289229f9..032f0d55be0 100644
--- a/src/pages/developers/tutorials.tsx
+++ b/src/pages/developers/tutorials.tsx
@@ -21,13 +21,13 @@ import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
 import InlineLink, { BaseLink } from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
-import Modal from "@/components/Modal"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
 import { getSkillTranslationId, Skill } from "@/components/TutorialMetadata"
 import TutorialTags from "@/components/TutorialTags"
+import Modal from "@/components/ui/dialog-modal"
 
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
@@ -42,6 +42,7 @@ import {
 
 import externalTutorials from "@/data/externalTutorials.json"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 const FilterTag = forwardRef<{ isActive: boolean; name: string }, "button">(
@@ -205,6 +206,8 @@ const TutorialPage = ({
   }
 
   const dir = contentNotTranslated ? "ltr" : "unset"
+
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
   return (
     <Flex
       as={MainArticle}
@@ -248,9 +251,9 @@ const TutorialPage = ({
       </Text>
 
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        size={{ base: "full", md: "xl" }}
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
         contentProps={{ dir }}
         title={
           <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />

From 9e26eae93e9506c668a82252db8586864c7f86e9 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Mon, 11 Nov 2024 23:42:56 -0500
Subject: [PATCH 09/17] refactor: remove old Modal and replace stories

---
 src/components/Modal/Modal.stories.tsx        | 29 -----------
 src/components/Modal/index.tsx                | 51 -------------------
 .../ui/__stories__/Modal.stories.tsx          |  2 +-
 3 files changed, 1 insertion(+), 81 deletions(-)
 delete mode 100644 src/components/Modal/Modal.stories.tsx
 delete mode 100644 src/components/Modal/index.tsx

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
deleted file mode 100644
index 27cb3b501db..00000000000
--- a/src/components/Modal/Modal.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import ModalComponent from "."
-
-const meta = {
-  title: "Molecules/Overlay Content/Modal",
-  component: ModalComponent,
-  args: {
-    isOpen: true,
-    title: "Modal Title",
-    children:
-      "This is the base component to be used in the modal window. Please change the text to preview final content for ethereum.org",
-    actionButtonLabel: "Save",
-    // Required prop, but not used in the current stories
-    onClose: () => {},
-  },
-} satisfies Meta<typeof ModalComponent>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Modal: Story = {}
-
-export const Full: Story = {
-  args: {
-    size: "full",
-  },
-}
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
deleted file mode 100644
index 11d2e80c59b..00000000000
--- a/src/components/Modal/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react"
-import {
-  Button,
-  HStack,
-  Modal as ChakraModal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalContentProps,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type ModalProps as ChakraModalProps,
-} from "@chakra-ui/react"
-
-export type ModalProps = ChakraModalProps & {
-  children?: React.ReactNode
-  title?: React.ReactNode
-  actionButtonLabel?: string
-  contentProps?: ModalContentProps
-}
-
-const Modal = ({
-  children,
-  title,
-  actionButtonLabel,
-  contentProps,
-  ...restProps
-}: ModalProps) => {
-  return (
-    <ChakraModal isCentered scrollBehavior="outside" {...restProps}>
-      <ModalOverlay />
-
-      <ModalContent {...contentProps}>
-        <HStack>
-          <ModalHeader>{title}</ModalHeader>
-          <ModalCloseButton />
-        </HStack>
-        <ModalBody>{children}</ModalBody>
-        {actionButtonLabel && (
-          <ModalFooter>
-            <Button variant="outline">Cancel</Button>
-            <Button>{actionButtonLabel}</Button>
-          </ModalFooter>
-        )}
-      </ModalContent>
-    </ChakraModal>
-  )
-}
-
-export default Modal
diff --git a/src/components/ui/__stories__/Modal.stories.tsx b/src/components/ui/__stories__/Modal.stories.tsx
index 6f044f8b5f5..4ad9aece047 100644
--- a/src/components/ui/__stories__/Modal.stories.tsx
+++ b/src/components/ui/__stories__/Modal.stories.tsx
@@ -4,7 +4,7 @@ import { fn } from "@storybook/test"
 import ModalComponent from "../dialog-modal"
 
 const meta = {
-  title: "Molecules/Overlay Content/ShadCN Modal",
+  title: "Molecules/Overlay Content/Modal",
   component: ModalComponent,
   args: {
     defaultOpen: true,

From be315b299e41de4cac9da5d1a74ffddd33006e30 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Wed, 13 Nov 2024 00:51:28 -0500
Subject: [PATCH 10/17] refactor(dialog-modal): remove internal disclosure from
 `Modal`

---
 src/components/ui/dialog-modal.tsx | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index a55fa1169b8..d35ff20daac 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -8,8 +8,6 @@ import { cn } from "@/lib/utils/cn"
 import { Button } from "./buttons/Button"
 import { Center, Flex } from "./flex"
 
-import { useDisclosure } from "@/hooks/useDisclosure"
-
 const dialogVariant = tv({
   slots: {
     content:
@@ -163,7 +161,6 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 export type ModalProps = DialogProps & {
   children?: React.ReactNode
   title?: React.ReactNode
-  onClose?: () => void
   actionButton?: {
     label: string
     onClick: () => void
@@ -176,23 +173,10 @@ const Modal = ({
   title,
   actionButton,
   contentProps,
-  defaultOpen,
-  onClose,
   ...restProps
 }: ModalProps) => {
-  const {
-    onClose: onDisclosureClose,
-    isOpen,
-    setValue,
-  } = useDisclosure(defaultOpen)
-
-  const handleClose = () => {
-    onClose?.()
-    onDisclosureClose()
-  }
-
   return (
-    <Dialog open={isOpen} onOpenChange={setValue} {...restProps}>
+    <Dialog {...restProps}>
       <DialogContent {...contentProps}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
@@ -202,7 +186,7 @@ const Modal = ({
           <DialogFooter>
             <Flex className="justify-end gap-2">
               <DialogClose asChild>
-                <Button onClick={handleClose} variant="outline" isSecondary>
+                <Button variant="outline" isSecondary>
                   Cancel
                 </Button>
               </DialogClose>

From aecb15c503000f7fcceab9b87c112202b2e4ba08 Mon Sep 17 00:00:00 2001
From: Tyler Pfledderer <tyler.pfledderer@gmail.com>
Date: Sun, 1 Dec 2024 19:10:48 -0500
Subject: [PATCH 11/17] chore(Simulator): remove console.log

---
 src/components/Simulator/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Simulator/index.tsx b/src/components/Simulator/index.tsx
index 2d21463d214..d324c1d467d 100644
--- a/src/components/Simulator/index.tsx
+++ b/src/components/Simulator/index.tsx
@@ -44,7 +44,6 @@ export const Simulator = ({ children, data }: SimulatorProps) => {
 
   // When simulator closed: log event, clear URL params and close modal
   const onClose: ModalProps["onOpenChange"] = (open) => {
-    console.log("🚀 ~ Simulator ~ open:", open)
     if (!open) {
       trackCustomEvent({
         eventCategory: "simulator",

From 2dd493741bd6815eb1b18c1aaa88317288f53110 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 13 Dec 2024 15:38:34 -0500
Subject: [PATCH 12/17] fix(dialog-modal): set default left/right space around
 container

---
 src/components/ui/dialog-modal.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index d35ff20daac..1e0ca195aab 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -11,7 +11,14 @@ import { Center, Flex } from "./flex"
 const dialogVariant = tv({
   slots: {
     content:
-      "data-[state=open]:animate-contentShow w-full fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
+      /**
+       * `w-[calc(-2rem_+_100%)]` provides 16px x-spacing around the container
+       * instead of using `margin` to avoid positioning side-effects.
+       * (The container is fixed positioned)
+       *
+       * Credit: Chakra v2 takes this approach for modal
+       */
+      "data-[state=open]:animate-contentShow w-[calc(-2rem_+_100%)] fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
     overlay:
       "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70 z-overlay",
     header: "relative pe-12",

From 2f5d51d0f3e90b66949c1cb862fe3211301cd8ca Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 13 Dec 2024 15:58:12 -0500
Subject: [PATCH 13/17] fix(dialog-modal): allow vertical overflow scrolling

---
 src/components/ui/dialog-modal.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index 1e0ca195aab..7af8167a41f 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -12,13 +12,14 @@ const dialogVariant = tv({
   slots: {
     content:
       /**
-       * `w-[calc(-2rem_+_100%)]` provides 16px x-spacing around the container
-       * instead of using `margin` to avoid positioning side-effects.
-       * (The container is fixed positioned)
+       * `size-[calc(-2rem_+_100%)]` provides 16px x- and y-spacing
+       * around the container instead of using `margin` to
+       * avoid positioning side-effects.
+       * (The container is fixed-positioned)
        *
-       * Credit: Chakra v2 takes this approach for modal
+       * Credit: Chakra v2 takes a similar approach for modal
        */
-      "data-[state=open]:animate-contentShow w-[calc(-2rem_+_100%)] fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
+      "data-[state=open]:animate-contentShow size-[calc(-2rem_+_100%)] fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal  overflow-auto",
     overlay:
       "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70 z-overlay",
     header: "relative pe-12",

From a5fde9cfa66144d8f50216962e956aabfd54cd53 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Fri, 13 Dec 2024 16:32:55 -0500
Subject: [PATCH 14/17] fix(dialog-model): increase close button icon size

---
 src/components/ui/dialog-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index 7af8167a41f..175cc311159 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -121,7 +121,7 @@ const DialogHeader = ({
       {children}
       <Center className={close()} asChild>
         <DialogPrimitive.Close>
-          <MdClose />
+          <MdClose size="20" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       </Center>

From f4aa42e5326e8d5c9dbebf7fd8159b6b65590b38 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Thu, 26 Dec 2024 20:22:50 -0500
Subject: [PATCH 15/17] fix(dialog-modal): wrap overlay component around
 content

---
 src/components/ui/dialog-modal.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index 175cc311159..a5904cc73e4 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -19,9 +19,9 @@ const dialogVariant = tv({
        *
        * Credit: Chakra v2 takes a similar approach for modal
        */
-      "data-[state=open]:animate-contentShow size-[calc(-2rem_+_100%)] fixed left-1/2 top-1/2 grid -translate-x-1/2 -translate-y-1/2 gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal  overflow-auto",
+      "data-[state=open]:animate-contentShow  grid gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
     overlay:
-      "data-[state=open]:animate-overlayShow fixed inset-0 bg-black/70 z-overlay",
+      "data-[state=open]:animate-overlayShow overflow-y-auto p-4 grid place-items-center fixed inset-0 bg-black/70 z-overlay",
     header: "relative pe-12",
     title: "text-2xl",
     footer: "pt-8",
@@ -97,14 +97,15 @@ const DialogContent = React.forwardRef<
   const { content } = useDialogStyles()
   return (
     <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(content(), className)}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Content>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          ref={ref}
+          className={cn(content(), className)}
+          {...props}
+        >
+          {children}
+        </DialogPrimitive.Content>
+      </DialogOverlay>
     </DialogPortal>
   )
 })

From d050268e46d1a9c3afc5f40a13cc0deab76e45ac Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 28 Dec 2024 20:44:10 -0500
Subject: [PATCH 16/17] fix(dialog-modal): set full width to content

---
 src/components/ui/dialog-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index a5904cc73e4..2d69c3a9553 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -19,7 +19,7 @@ const dialogVariant = tv({
        *
        * Credit: Chakra v2 takes a similar approach for modal
        */
-      "data-[state=open]:animate-contentShow  grid gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
+      "data-[state=open]:animate-contentShow w-full grid gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
     overlay:
       "data-[state=open]:animate-overlayShow overflow-y-auto p-4 grid place-items-center fixed inset-0 bg-black/70 z-overlay",
     header: "relative pe-12",

From 23bab1df21f93855a21de37ae53c800f5148bd48 Mon Sep 17 00:00:00 2001
From: tylerapfledderer <tyler.pfledderer@gmail.com>
Date: Sat, 28 Dec 2024 20:45:12 -0500
Subject: [PATCH 17/17] chore(dialog-modal): remove comment above content style

---
 src/components/ui/dialog-modal.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/ui/dialog-modal.tsx b/src/components/ui/dialog-modal.tsx
index 2d69c3a9553..0ec69203a1c 100644
--- a/src/components/ui/dialog-modal.tsx
+++ b/src/components/ui/dialog-modal.tsx
@@ -11,14 +11,6 @@ import { Center, Flex } from "./flex"
 const dialogVariant = tv({
   slots: {
     content:
-      /**
-       * `size-[calc(-2rem_+_100%)]` provides 16px x- and y-spacing
-       * around the container instead of using `margin` to
-       * avoid positioning side-effects.
-       * (The container is fixed-positioned)
-       *
-       * Credit: Chakra v2 takes a similar approach for modal
-       */
       "data-[state=open]:animate-contentShow w-full grid gap-4 rounded-md bg-background p-8 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-modal",
     overlay:
       "data-[state=open]:animate-overlayShow overflow-y-auto p-4 grid place-items-center fixed inset-0 bg-black/70 z-overlay",