From a5ea69ba22076f4b6fc6f9b2987276f4a388525e Mon Sep 17 00:00:00 2001
From: Natsumi <cmcooper123@hotmail.com>
Date: Sat, 31 Jan 2026 07:20:19 +1300
Subject: [PATCH] Fix dialog jumping around on image load and fix showing prev
 image

---
 .../dialogs/AvatarDialog/AvatarDialog.vue     | 18 +++++----
 .../dialogs/GroupDialog/GroupDialog.vue       | 22 +++++-----
 .../dialogs/UserDialog/UserSummaryHeader.vue  | 40 ++++++++++---------
 .../dialogs/WorldDialog/WorldDialog.vue       | 19 +++++----
 4 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index a8835788..9252d2fb 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -8,13 +8,15 @@
         </DialogHeader>
         <div>
             <div class="flex">
-                <img
-                    :src="avatarDialog.ref.thumbnailImageUrl"
-                    class="cursor-pointer"
-                    @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
-                    style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                    loading="lazy" />
-                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                <div style="flex: none; width: 160px; height: 120px">
+                    <img
+                        :src="avatarDialog.ref.thumbnailImageUrl"
+                        class="cursor-pointer"
+                        @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
+                        style="width: 160px; height: 120px; border-radius: 12px"
+                        loading="lazy" />
+                </div>
+                <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
                     <div style="flex: 1">
                         <div>
                             <span
@@ -179,7 +181,7 @@
                                 v-text="avatarDialog.ref.description"></span>
                         </div>
                     </div>
-                    <div class="flex items-center">
+                    <div class="ml-2 mt-12">
                         <TooltipWrapper
                             v-if="avatarDialog.inCache"
                             side="top"
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index f1543e62..c97d8677 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -8,13 +8,16 @@
         </DialogHeader>
         <div>
             <div style="display: flex">
-                <img
-                    :src="groupDialog.ref.iconUrl"
-                    style="flex: none; width: 120px; height: 120px; border-radius: 12px"
-                    class="cursor-pointer"
-                    @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
-                    loading="lazy" />
-                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                <div style="flex: none; width: 120px; height: 120px">
+                    <img
+                        v-if="!groupDialog.loading"
+                        :src="groupDialog.ref.iconUrl"
+                        style="width: 120px; height: 120px; border-radius: 12px"
+                        class="cursor-pointer"
+                        @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
+                        loading="lazy" />
+                </div>
+                <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
                     <div class="group-header" style="flex: 1">
                         <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
                         <span
@@ -138,7 +141,7 @@
                                 v-text="groupDialog.ref.description"></pre>
                         </div>
                     </div>
-                    <div style="flex: none; margin-left: 10px">
+                    <div class="ml-2 mt-12">
                         <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
                             <TooltipWrapper
                                 v-if="groupDialog.ref.myMember?.isRepresenting"
@@ -341,8 +344,9 @@
                 :unmount-on-hide="false"
                 @update:modelValue="groupDialogTabClick">
                 <template #Info>
-                    <div class="group-banner-image-info">
+                    <div>
                         <img
+                            v-if="!groupDialog.loading"
                             :src="groupDialog.ref.bannerUrl"
                             class="cursor-pointer"
                             style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 31d60c44..7620af5b 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -1,23 +1,25 @@
 <template>
     <div style="display: flex">
-        <img
-            v-if="
-                !userDialog.loading && (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
-            "
-            class="cursor-pointer"
-            :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
-            style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
-            @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
-            loading="lazy" />
-        <img
-            v-else-if="!userDialog.loading"
-            class="cursor-pointer"
-            :src="userDialog.ref.currentAvatarThumbnailImageUrl"
-            style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
-            @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
-            loading="lazy" />
-
-        <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+        <div style="flex: none; height: 120px; width: 160px">
+            <img
+                v-if="
+                    !userDialog.loading &&
+                    (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
+                "
+                class="cursor-pointer"
+                :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
+                style="height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
+                @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
+                loading="lazy" />
+            <img
+                v-else-if="!userDialog.loading"
+                class="cursor-pointer"
+                :src="userDialog.ref.currentAvatarThumbnailImageUrl"
+                style="height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
+                @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
+                loading="lazy" />
+        </div>
+        <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
             <div style="flex: 1">
                 <div>
                     <TooltipWrapper v-if="userDialog.ref.status" side="top">
@@ -260,7 +262,7 @@
                     loading="lazy" />
             </div>
 
-            <UserActionDropdown :user-dialog-command="userDialogCommand" />
+            <UserActionDropdown class="ml-2 mt-12" :user-dialog-command="userDialogCommand" />
         </div>
     </div>
 </template>
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 2ee8fca9..3a27e93a 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -8,13 +8,16 @@
         </DialogHeader>
         <div>
             <div style="display: flex">
-                <img
-                    :src="worldDialog.ref.thumbnailImageUrl"
-                    class="cursor-pointer"
-                    style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                    @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
-                    loading="lazy" />
-                <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
+                <div style="flex: none; width: 160px; height: 120px">
+                    <img
+                        v-if="!worldDialog.loading"
+                        :src="worldDialog.ref.thumbnailImageUrl"
+                        class="cursor-pointer"
+                        style="width: 160px; height: 120px; border-radius: 12px"
+                        @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
+                        loading="lazy" />
+                </div>
+                <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
                     <div style="flex: 1">
                         <div>
                             <span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName">
@@ -155,7 +158,7 @@
                             >
                         </div>
                     </div>
-                    <div style="flex: none; margin-left: 10px">
+                    <div class="ml-2 mt-12">
                         <TooltipWrapper
                             v-if="worldDialog.inCache"
                             side="top"