fix(dialog-modal): allow vertical overflow scrolling

Author: TylerAPfledderer

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",