From cc066eb0a245592d89eb013f11a09f1a248497ee Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:14:50 +0330
Subject: [PATCH] refactor: update Modal component structure and improve minor
 UI and template consistency across components

---
 frontend/components/global/Modal.vue | 62 +++++++++++++---------------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/frontend/components/global/Modal.vue b/frontend/components/global/Modal.vue
index 793eea1..5814a19 100644
--- a/frontend/components/global/Modal.vue
+++ b/frontend/components/global/Modal.vue
@@ -50,50 +50,44 @@ const isShow = computed({
                 class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
             />
 
-            <div
-                class="fixed inset-0 w-full h-svh z-9999 flex-center"
-                v-if="isShow"
+            <DialogContent
+                class="fixed inset-0 z-9999 flex items-start justify-center overflow-y-auto overscroll-contain data-[state=open]:animate-content-show focus:outline-none"
+                style="touch-action: pan-y"
             >
                 <div
                     :class="contectClass"
-                    class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]"
+                    class="relative w-fit max-w-[50rem] my-auto py-10"
                 >
-                    <DialogContent
-                        class="data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
+                    <div
+                        class="rounded-2xl bg-white text-black font-iran-yekan-x shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
                     >
                         <div
-                            class="rounded-2xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
+                            class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
                         >
-                            <div
-                                class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
+                            <DialogClose
+                                class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
+                                aria-label="Close"
                             >
-                                <DialogClose
-                                    class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
-                                    aria-label="Close"
-                                >
-                                    <Icon
-                                        name="ci:bi-x-lg"
-                                        class="**:fill-black"
-                                    />
-                                </DialogClose>
-                                <DialogTitle
-                                    class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3"
-                                >
-                                    {{ title }}
-                                    <Icon
-                                        v-if="!!icon"
-                                        :name="icon"
-                                        :size="iconSize"
-                                    />
-                                </DialogTitle>
-                            </div>
-                            <div class="w-full px-6">
-                                <slot name="content" />
-                            </div>
+                                <Icon
+                                    name="ci:bi-x-lg"
+                                    class="**:fill-black"
+                                />
+                            </DialogClose>
+                            <DialogTitle class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3">
+                                {{ title }}
+                                <Icon
+                                    v-if="!!icon"
+                                    :name="icon"
+                                    :size="iconSize"
+                                />
+                            </DialogTitle>
                         </div>
-                    </DialogContent>
+                        <div class="w-full px-6">
+                            <slot name="content" />
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </DialogContent>
         </DialogPortal>
     </DialogRoot>
 </template>