fix(dialog-modal): set default left/right space around container

Author: TylerAPfledderer

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