From 3014edfd3f070dded7ad9ecc3dd71a0999d7cf83 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 16 Apr 2025 22:57:07 +0330
Subject: [PATCH] responsived

---
 .../profile/index/ProfilePictureModal.vue     | 107 ++++++++++--------
 1 file changed, 57 insertions(+), 50 deletions(-)

diff --git a/frontend/components/profile/index/ProfilePictureModal.vue b/frontend/components/profile/index/ProfilePictureModal.vue
index 5674c7e..d9af18d 100644
--- a/frontend/components/profile/index/ProfilePictureModal.vue
+++ b/frontend/components/profile/index/ProfilePictureModal.vue
@@ -84,7 +84,13 @@ onFileDialogChange((files: any) => {
 </script>
 
 <template>
-    <Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
+    <Modal
+        v-model="visible"
+        title="عکس پروفایل"
+        icon="bi:image"
+        iconSize="20"
+        contectClass="w-full max-lg:container lg:!w-[30vw]"
+    >
         <template #trigger>
             <button
                 class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
@@ -93,61 +99,62 @@ onFileDialogChange((files: any) => {
             </button>
         </template>
         <template #content>
-            <div class="w-max">
+            <div
+                class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
+            >
                 <div
-                    class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
+                    class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
                 >
-                    <div
-                        class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
+                    <button
+                        v-for="(avatar, index) in avatars"
+                        :key="index"
+                        class="size-16 lg:size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
                     >
-                        <button
-                            v-for="(avatar, index) in avatars"
-                            :key="index"
-                            class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
-                        >
-                            <Avatar
-                                :src="avatar"
-                                :alt="`avatar-${index}`"
-                                class="size-full"
-                            />
-                        </button>
-                    </div>
+                        <Avatar
+                            :src="avatar"
+                            :alt="`avatar-${index}`"
+                            class="size-full"
+                        />
+                    </button>
+                </div>
 
-                    <div
-                        class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
+                <div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
+                    <button
+                        class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                    />
+                    <button
+                        class="size-6 lg:size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                    />
+                    <button
+                        class="size-6 lg:size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                    />
+                    <button
+                        class="size-6 lg:size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                    />
+                    <button
+                        class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                    />
+                </div>
+
+                <div class="w-full flex-col-center gap-5">
+                    <Avatar
+                        :src="currentProfile"
+                        alt=""
+                        class="!size-24 lg:!size-32"
+                        iconClass="!text-xl lg:!text-2xl"
+                    />
+                    <Button
+                        class="rounded-full w-[8rem]"
+                        @click="openFileDialog"
+                        :loading="updateAccountIsPending"
+                        size="md"
                     >
-                        <button
-                            class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
+                        <Icon
+                            v-if="updateAccountIsPending"
+                            name="svg-spinners:3-dots-bounce"
                         />
-                        <button
-                            class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
-                        />
-                        <button
-                            class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
-                        />
-                        <button
-                            class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
-                        />
-                        <button
-                            class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
-                        />
-                    </div>
-
-                    <div class="w-full flex-col-center gap-5">
-                        <Avatar :src="currentProfile" alt="" class="!size-32" />
-                        <Button
-                            class="rounded-full w-[8rem]"
-                            @click="openFileDialog"
-                            :loading="updateAccountIsPending"
-                            size="md"
-                        >
-                            <Icon
-                                v-if="updateAccountIsPending"
-                                name="svg-spinners:3-dots-bounce"
-                            />
-                            <span v-else>آپلود عکس شما</span>
-                        </Button>
-                    </div>
+                        <span v-else>آپلود عکس شما</span>
+                    </Button>
                 </div>
             </div>
         </template>