fix: fixed position of image in challenge and goal view

src/views/ViewChallengeView.vue

@@ -112,14 +112,14 @@ const completeChallenge = () => {
                 <h2 class="font-light">
                     {{ challengeInstance.title }}
                 </h2>
-                <div class="flex flex-row gap-4 justify-center">
+                <div class="flex flex-col gap-4 justify-center">
                     <p class="text-wrap break-words">{{ challengeInstance.description }}</p>
-                    <div>
+                    <div class="flex justify-center items-center">
                         <img
                             v-if="isImageLoaded"
                             :src="challengeImageUrl || '@/assets/star.png'"
                             alt="Goal Image"
-                            class="w-full h-40 object-cover rounded-lg"
+                            class="w-44 h-44 object-cover rounded-lg"
                         />
                     </div>
                 </div>

src/views/ViewGoalView.vue

@@ -101,14 +101,14 @@ const completeGoal = () => {
                 <h2 class="font-light">
                     {{ goalInstance.title }}
                 </h2>
-                <div class="flex flex-row gap-4 justify-center">
+                <div class="flex flex-col gap-4 justify-center">
                     <p class="text-wrap break-words">{{ goalInstance.description }}</p>
-                    <div>
+                    <div class="flex justify-center items-center">
                         <img
                             v-if="isImageLoaded"
                             :src="goalImageUrl || '@/assets/star.png'"
                             alt="Goal Image"
-                            class="w-full h-40 object-cover rounded-lg"
+                            class="w-44 h-44 object-cover rounded-lg"
                         />
                     </div>
                 </div>