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,14 +20,14 @@ const {
     onClose,
     closedby = "none",
     dialogClass = "",
+    triggerClass = "",
 } = Astro.props;
 ---
 
-<div>
-    <div id={`trigger-${id}`} class="wr:w-fit">
+<div id={`trigger-${id}`} class={triggerClass}>
     <slot name="trigger" />
-    </div>
-    <dialog
+</div>
+<dialog
     open={open}
     id={`modal-${id}`}
     closedby={closedby}
@@ -47,10 +48,9 @@ const {
             "wr:bottom-0 wr:top-[95%] wr:mx-auto wr:-translate-y-full",
         dialogClass,
     )}
-    >
+>
     <slot name="content" />
-    </dialog>
-</div>
+</dialog>
 
 <style>
     dialog::backdrop {

src/pages/modal.astro

@@ -5,15 +5,21 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
 ---
 
 <ComponentLayout class="wr:p-4">
+    <div class="wr:flex wr:gap-2">
         <!-- Small Center Modal -->
-    <Modal id="sm-center" size="sm" position="center" closedby="closerequest">
-        <span slot="trigger">
+        <Modal
+            id="sm-center"
+            size="sm"
+            position="center"
+            closedby="closerequest"
+            triggerClass="wr:w-1/2"
+        >
             <button
-                class="wr:px-4 wr:py-2 wr:rounded wr:bg-blue-600 wr:text-white"
+                slot="trigger"
+                class="wr:w-full wr:px-4 wr:py-2 wr:rounded wr:bg-blue-600 wr:text-white"
             >
                 Small Center
             </button>
-        </span>
             <div slot="content" class="wr:max-h-[400px] wr:overflow-y-auto">
                 <h2 class="wr:text-lg wr:font-semibold">Small Center Modal</h2>
                 <p class="wr:mt-2">
@@ -71,7 +77,12 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
         </Modal>
 
         <!-- Large Bottom Modal -->
-    <Modal id="lg-bottom" size="lg" position="bottom" closedby="closerequest">
+        <Modal
+            id="lg-bottom"
+            size="lg"
+            position="bottom"
+            closedby="closerequest"
+        >
             <span slot="trigger">
                 <button
                     class="wr:px-4 wr:py-2 wr:rounded wr:bg-purple-600 wr:text-white"
@@ -119,7 +130,8 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
                 {
                     Array.from({ length: 60 }).map((_, i) => (
                         <p class="wr:mt-2">
-                        Line {i + 1}: Scroll inside modal without moving page.
+                            Line {i + 1}: Scroll inside modal without moving
+                            page.
                         </p>
                     ))
                 }
@@ -149,7 +161,8 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
                 {
                     Array.from({ length: 100 }).map((_, i) => (
                         <p class="wr:mt-2">
-                        Block {i + 1}: Testing long content inside full modal.
+                            Block {i + 1}: Testing long content inside full
+                            modal.
                         </p>
                     ))
                 }
@@ -161,4 +174,5 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
                 </button>
             </div>
         </Modal>
+    </div>
 </ComponentLayout>