From df9bc67220baf3ee7e02587a7f8cfe19461ae549 Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Tue, 30 Sep 2025 17:58:07 +0530
Subject: [PATCH] New Changes with Model fixxed bugges

---
 src/components/Modal.astro |  56 +++----
 src/pages/modal.astro      | 300 +++++++++++++++++++------------------
 2 files changed, 185 insertions(+), 171 deletions(-)

diff --git a/src/components/Modal.astro b/src/components/Modal.astro
index f704654..3b25a2b 100644
--- a/src/components/Modal.astro
+++ b/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 {
diff --git a/src/pages/modal.astro b/src/pages/modal.astro
index dad00d2..7342e04 100644
--- a/src/pages/modal.astro
+++ b/src/pages/modal.astro
@@ -5,160 +5,174 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
 ---
 
 <ComponentLayout class="wr:p-4">
-    <!-- Small Center Modal -->
-    <Modal id="sm-center" size="sm" position="center" closedby="closerequest">
-        <span slot="trigger">
+    <div class="wr:flex wr:gap-2">
+        <!-- Small Center Modal -->
+        <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">
-                This is a small modal centered on the screen with limited
-                height.
-            </p>
-            <ul class="wr:space-y-2 wr:mt-4">
+            <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">
+                    This is a small modal centered on the screen with limited
+                    height.
+                </p>
+                <ul class="wr:space-y-2 wr:mt-4">
+                    {
+                        Array.from({ length: 20 }).map((_, i) => (
+                            <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
+                                Item {i + 1}
+                            </li>
+                        ))
+                    }
+                </ul>
+                <button
+                    id="close-sm-center"
+                    class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+                >
+                    Close
+                </button>
+            </div>
+        </Modal>
+
+        <!-- Medium Top Modal -->
+        <Modal id="md-top" size="md" position="top" closedby="any">
+            <span slot="trigger">
+                <button
+                    class="wr:px-4 wr:py-2 wr:rounded wr:bg-green-600 wr:text-white"
+                >
+                    Medium Top
+                </button>
+            </span>
+            <div slot="content" class="wr:max-h-[500px] wr:overflow-y-auto">
+                <h2 class="wr:text-lg wr:font-semibold">Medium Top Modal</h2>
+                <p class="wr:mt-2">
+                    This modal appears at the top of the page with scrollable
+                    content.
+                </p>
                 {
-                    Array.from({ length: 20 }).map((_, i) => (
-                        <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
-                            Item {i + 1}
-                        </li>
+                    Array.from({ length: 40 }).map((_, i) => (
+                        <p class="wr:mt-2">
+                            Paragraph {i + 1}: Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit.
+                        </p>
                     ))
                 }
-            </ul>
-            <button
-                id="close-sm-center"
-                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
-            >
-                Close
-            </button>
-        </div>
-    </Modal>
+                <button
+                    id="close-md-top"
+                    class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+                >
+                    Close
+                </button>
+            </div>
+        </Modal>
 
-    <!-- Medium Top Modal -->
-    <Modal id="md-top" size="md" position="top" closedby="any">
-        <span slot="trigger">
-            <button
-                class="wr:px-4 wr:py-2 wr:rounded wr:bg-green-600 wr:text-white"
-            >
-                Medium Top
-            </button>
-        </span>
-        <div slot="content" class="wr:max-h-[500px] wr:overflow-y-auto">
-            <h2 class="wr:text-lg wr:font-semibold">Medium Top Modal</h2>
-            <p class="wr:mt-2">
-                This modal appears at the top of the page with scrollable
-                content.
-            </p>
-            {
-                Array.from({ length: 40 }).map((_, i) => (
-                    <p class="wr:mt-2">
-                        Paragraph {i + 1}: Lorem ipsum dolor sit amet,
-                        consectetur adipiscing elit.
-                    </p>
-                ))
-            }
-            <button
-                id="close-md-top"
-                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
-            >
-                Close
-            </button>
-        </div>
-    </Modal>
+        <!-- Large Bottom Modal -->
+        <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"
+                >
+                    Large Bottom
+                </button>
+            </span>
+            <div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto">
+                <h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2>
+                <p class="wr:mt-2">
+                    This modal appears at the bottom of the screen.
+                </p>
+                <ul class="wr:space-y-2 wr:mt-4">
+                    {
+                        Array.from({ length: 50 }).map((_, i) => (
+                            <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
+                                Bottom Item {i + 1}
+                            </li>
+                        ))
+                    }
+                </ul>
+                <button
+                    id="close-lg-bottom"
+                    class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+                >
+                    Close
+                </button>
+            </div>
+        </Modal>
 
-    <!-- Large Bottom Modal -->
-    <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"
-            >
-                Large Bottom
-            </button>
-        </span>
-        <div slot="content" class="wr:max-h-[600px] wr:overflow-y-auto">
-            <h2 class="wr:text-lg wr:font-semibold">Large Bottom Modal</h2>
-            <p class="wr:mt-2">
-                This modal appears at the bottom of the screen.
-            </p>
-            <ul class="wr:space-y-2 wr:mt-4">
+        <!-- Extra Large Center Modal -->
+        <Modal id="xl-center" size="xl" position="center">
+            <span slot="trigger">
+                <button
+                    class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white"
+                >
+                    XL Center
+                </button>
+            </span>
+            <div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto">
+                <h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2>
+                <p class="wr:mt-2">
+                    Extra large modal in the middle with scroll test.
+                </p>
                 {
-                    Array.from({ length: 50 }).map((_, i) => (
-                        <li class="wr:p-2 wr:bg-gray-100 wr:rounded">
-                            Bottom Item {i + 1}
-                        </li>
+                    Array.from({ length: 60 }).map((_, i) => (
+                        <p class="wr:mt-2">
+                            Line {i + 1}: Scroll inside modal without moving
+                            page.
+                        </p>
                     ))
                 }
-            </ul>
-            <button
-                id="close-lg-bottom"
-                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
-            >
-                Close
-            </button>
-        </div>
-    </Modal>
+                <button
+                    id="close-xl-center"
+                    class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
+                >
+                    Close
+                </button>
+            </div>
+        </Modal>
 
-    <!-- Extra Large Center Modal -->
-    <Modal id="xl-center" size="xl" position="center">
-        <span slot="trigger">
-            <button
-                class="wr:px-4 wr:py-2 wr:rounded wr:bg-orange-600 wr:text-white"
-            >
-                XL Center
-            </button>
-        </span>
-        <div slot="content" class="wr:max-h-[700px] wr:overflow-y-auto">
-            <h2 class="wr:text-lg wr:font-semibold">XL Center Modal</h2>
-            <p class="wr:mt-2">
-                Extra large modal in the middle with scroll test.
-            </p>
-            {
-                Array.from({ length: 60 }).map((_, i) => (
-                    <p class="wr:mt-2">
-                        Line {i + 1}: Scroll inside modal without moving page.
-                    </p>
-                ))
-            }
-            <button
-                id="close-xl-center"
-                class="wr:mt-4 wr:px-4 wr:py-2 wr:bg-gray-200 wr:rounded"
-            >
-                Close
-            </button>
-        </div>
-    </Modal>
-
-    <!-- Full Screen Modal -->
-    <Modal id="full-screen" size="full" position="center">
-        <span slot="trigger">
-            <button
-                class="wr:px-4 wr:py-2 wr:rounded wr:bg-red-600 wr:text-white"
-            >
-                Full Screen
-            </button>
-        </span>
-        <div slot="content" class="wr:h-full wr:overflow-y-auto wr:p-6">
-            <h2 class="wr:text-2xl wr:font-bold">Full Screen Modal</h2>
-            <p class="wr:mt-4 wr:text-lg">
-                This modal covers the entire screen and scrolls vertically.
-            </p>
-            {
-                Array.from({ length: 100 }).map((_, i) => (
-                    <p class="wr:mt-2">
-                        Block {i + 1}: Testing long content inside full modal.
-                    </p>
-                ))
-            }
-            <button
-                id="close-full-screen"
-                class="wr:mt-6 wr:px-6 wr:py-3 wr:bg-white wr:rounded wr:text-red-600 wr:border"
-            >
-                Close Full
-            </button>
-        </div>
-    </Modal>
+        <!-- Full Screen Modal -->
+        <Modal id="full-screen" size="full" position="center">
+            <span slot="trigger">
+                <button
+                    class="wr:px-4 wr:py-2 wr:rounded wr:bg-red-600 wr:text-white"
+                >
+                    Full Screen
+                </button>
+            </span>
+            <div slot="content" class="wr:h-full wr:overflow-y-auto wr:p-6">
+                <h2 class="wr:text-2xl wr:font-bold">Full Screen Modal</h2>
+                <p class="wr:mt-4 wr:text-lg">
+                    This modal covers the entire screen and scrolls vertically.
+                </p>
+                {
+                    Array.from({ length: 100 }).map((_, i) => (
+                        <p class="wr:mt-2">
+                            Block {i + 1}: Testing long content inside full
+                            modal.
+                        </p>
+                    ))
+                }
+                <button
+                    id="close-full-screen"
+                    class="wr:mt-6 wr:px-6 wr:py-3 wr:bg-white wr:rounded wr:text-red-600 wr:border"
+                >
+                    Close Full
+                </button>
+            </div>
+        </Modal>
+    </div>
 </ComponentLayout>