New Changes with Model fixxed bugges

src/components/Modal.astro

@@ -9,6 +9,7 @@ interface Props {
     closedby?: "none" | "closerequest" | "any";
     onClose?: () => void;
     dialogClass?: string;
+    triggerClass?: string;
 }
 
 const {
@@ -19,38 +20,37 @@ const {
     onClose,
     closedby = "none",
     dialogClass = "",
+    triggerClass = "",
 } = Astro.props;
 ---
 
-<div>
-    <div id={`trigger-${id}`} class="wr:w-fit">
-        <slot name="trigger" />
-    </div>
-    <dialog
-        open={open}
-        id={`modal-${id}`}
-        closedby={closedby}
-        class={cn(
-            "wr:absolute wr:rounded-md wr:shadow-lg wr:p-4 wr:bg-white wr:dark:bg-neutral-800 wr:m-0 wr:border-0",
-            size === "sm" && "wr:w-[300px]",
-            size === "md" && "wr:w-[500px]",
-            size === "lg" && "wr:w-[700px]",
-            size === "xl" && "wr:w-[900px]",
-            size === "full" &&
-                "wr:w-full wr:h-screen wr:max-w-none wr:rounded-none wr:inset-0",
-            position == "center" &&
-                size !== "full" &&
-                "wr:top-1/2 wr:left-1/2 wr:-translate-x-1/2 wr:-translate-y-1/2",
-            position == "top" && size !== "full" && "wr:top-[30px] wr:mx-auto",
-            position == "bottom" &&
-                size !== "full" &&
-                "wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
-            dialogClass,
-        )}
-    >
-        <slot name="content" />
-    </dialog>
+<div id={`trigger-${id}`} class={triggerClass}>
+    <slot name="trigger" />
 </div>
+<dialog
+    open={open}
+    id={`modal-${id}`}
+    closedby={closedby}
+    class={cn(
+        "wr:absolute wr:rounded-md wr:shadow-lg wr:p-4 wr:bg-white wr:dark:bg-neutral-800 wr:m-0 wr:border-0",
+        size === "sm" && "wr:w-[300px]",
+        size === "md" && "wr:w-[500px]",
+        size === "lg" && "wr:w-[700px]",
+        size === "xl" && "wr:w-[900px]",
+        size === "full" &&
+            "wr:w-full wr:h-screen wr:max-w-none wr:rounded-none wr:inset-0",
+        position == "center" &&
+            size !== "full" &&
+            "wr:top-1/2 wr:left-1/2 wr:-translate-x-1/2 wr:-translate-y-1/2",
+        position == "top" && size !== "full" && "wr:top-[30px] wr:mx-auto",
+        position == "bottom" &&
+            size !== "full" &&
+            "wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
+        dialogClass,
+    )}
+>
+    <slot name="content" />
+</dialog>
 
 <style>
     dialog::backdrop {