From 877ccc66d34c544ac1cd2b8c6a8e1be446fb9d7d Mon Sep 17 00:00:00 2001
From: Natsumi <cmcooper123@hotmail.com>
Date: Sat, 4 Oct 2025 21:40:40 +1300
Subject: [PATCH] Remove image click tooltips

---
 .../dialogs/AvatarDialog/AvatarDialog.vue     |  40 ++---
 .../dialogs/GroupDialog/GroupDialog.vue       | 128 +++++---------
 .../GroupDialog/GroupPostEditDialog.vue       |  24 +--
 .../dialogs/UserDialog/UserDialog.vue         | 156 ++++++------------
 .../dialogs/WorldDialog/WorldDialog.vue       |  20 +--
 src/views/Notifications/Notification.vue      |  40 ++---
 src/views/PlayerList/PlayerList.vue           |  20 +--
 7 files changed, 129 insertions(+), 299 deletions(-)

diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 323cf936..6ea3b728 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -7,35 +7,20 @@
         width="700px">
         <div v-loading="avatarDialog.loading">
             <div style="display: flex">
-                <el-popover placement="right" :width="500" trigger="click">
-                    <template #reference>
-                        <img
-                            :src="avatarDialog.ref.thumbnailImageUrl"
-                            class="x-link"
-                            style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                            loading="lazy" />
-                    </template>
-                    <img
-                        :src="avatarDialog.ref.imageUrl"
-                        :class="['x-link', 'x-popover-image']"
-                        @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
-                        loading="lazy" />
-                </el-popover>
+                <img
+                    :src="avatarDialog.ref.thumbnailImageUrl"
+                    class="x-link"
+                    @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: 1">
                         <div>
-                            <el-popover placement="top" trigger="click">
-                                <template #reference>
-                                    <span
-                                        class="dialog-title"
-                                        style="margin-right: 5px; cursor: pointer"
-                                        v-text="avatarDialog.ref.name"
-                                        @click="copyToClipboard(avatarDialog.ref.name)"></span>
-                                </template>
-                                <span style="display: block; text-align: center; font-family: monospace">{{
-                                    textToHex(avatarDialog.ref.name)
-                                }}</span>
-                            </el-popover>
+                            <span
+                                class="dialog-title"
+                                style="margin-right: 5px; cursor: pointer"
+                                v-text="avatarDialog.ref.name"
+                                @click="copyToClipboard(avatarDialog.ref.name)"></span>
                         </div>
                         <div style="margin-top: 5px">
                             <span
@@ -625,8 +610,7 @@
         replaceVrcPackageUrl,
         timeToText,
         moveArrayItem,
-        formatDateFilter,
-        textToHex
+        formatDateFilter
     } from '../../../shared/utils';
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index e5de30ec..1d0b52a7 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -7,35 +7,20 @@
         class="x-dialog x-group-dialog">
         <div v-loading="groupDialog.loading" class="group-body">
             <div style="display: flex">
-                <el-popover placement="right" :width="500" trigger="click">
-                    <template #reference>
-                        <img
-                            :src="groupDialog.ref.iconUrl"
-                            style="flex: none; width: 120px; height: 120px; border-radius: 12px"
-                            class="x-link"
-                            loading="lazy" />
-                    </template>
-                    <img
-                        :src="groupDialog.ref.iconUrl"
-                        :class="['x-link', 'x-popover-image']"
-                        @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
-                        loading="lazy" />
-                </el-popover>
+                <img
+                    :src="groupDialog.ref.iconUrl"
+                    style="flex: none; width: 120px; height: 120px; border-radius: 12px"
+                    class="x-link"
+                    @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
+                    loading="lazy" />
                 <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
                     <div class="group-header" style="flex: 1">
                         <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
-                        <el-popover placement="top" trigger="click">
-                            <template #reference>
-                                <span
-                                    class="dialog-title"
-                                    style="margin-right: 5px; cursor: pointer"
-                                    v-text="groupDialog.ref.name"
-                                    @click="copyToClipboard(groupDialog.ref.name)"></span>
-                            </template>
-                            <span style="display: block; text-align: center; font-family: monospace">{{
-                                textToHex(groupDialog.ref.name)
-                            }}</span>
-                        </el-popover>
+                        <span
+                            class="dialog-title"
+                            style="margin-right: 5px; cursor: pointer"
+                            v-text="groupDialog.ref.name"
+                            @click="copyToClipboard(groupDialog.ref.name)"></span>
                         <span
                             class="group-discriminator x-grey"
                             style="font-family: monospace; font-size: 12px; margin-right: 5px">
@@ -379,26 +364,12 @@
             <el-tabs v-model="groupDialogLastActiveTab" @tab-click="groupDialogTabClick">
                 <el-tab-pane name="Info" :label="t('dialog.group.info.header')">
                     <div class="group-banner-image-info">
-                        <el-popover placement="bottom" :width="1000" trigger="click">
-                            <template #reference>
-                                <img
-                                    :src="groupDialog.ref.bannerUrl"
-                                    class="x-link"
-                                    style="
-                                        flex: none;
-                                        width: 100%;
-                                        aspect-ratio: 6/1;
-                                        object-fit: cover;
-                                        border-radius: 4px;
-                                    "
-                                    loading="lazy" />
-                            </template>
-                            <img
-                                :src="groupDialog.ref.bannerUrl"
-                                :class="['x-link', 'x-popover-image']"
-                                @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
-                                loading="lazy" />
-                        </el-popover>
+                        <img
+                            :src="groupDialog.ref.bannerUrl"
+                            class="x-link"
+                            style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: 4px"
+                            @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
+                            loading="lazy" />
                     </div>
                     <div class="x-friend-list" style="max-height: none">
                         <span
@@ -459,26 +430,18 @@
                                 <div
                                     v-if="groupDialog.announcement.imageUrl"
                                     style="display: inline-block; margin-right: 5px">
-                                    <el-popover placement="right" :width="500" trigger="click">
-                                        <template #reference>
-                                            <img
-                                                :src="groupDialog.announcement.imageUrl"
-                                                class="x-link"
-                                                style="
-                                                    flex: none;
-                                                    width: 60px;
-                                                    height: 60px;
-                                                    border-radius: 4px;
-                                                    object-fit: cover;
-                                                "
-                                                loading="lazy" />
-                                        </template>
-                                        <img
-                                            :src="groupDialog.announcement.imageUrl"
-                                            :class="['x-link', 'x-popover-image']"
-                                            @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
-                                            loading="lazy" />
-                                    </el-popover>
+                                    <img
+                                        :src="groupDialog.announcement.imageUrl"
+                                        class="x-link"
+                                        style="
+                                            flex: none;
+                                            width: 60px;
+                                            height: 60px;
+                                            border-radius: 4px;
+                                            object-fit: cover;
+                                        "
+                                        @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
+                                        loading="lazy" />
                                 </div>
                                 <pre
                                     class="extra"
@@ -751,26 +714,18 @@
                                 <div class="detail">
                                     <span style="display: block" v-text="post.title" />
                                     <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
-                                        <el-popover placement="right" :width="500" trigger="click">
-                                            <template #reference>
-                                                <img
-                                                    :src="post.imageUrl"
-                                                    class="x-link"
-                                                    style="
-                                                        flex: none;
-                                                        width: 60px;
-                                                        height: 60px;
-                                                        border-radius: 4px;
-                                                        object-fit: cover;
-                                                    "
-                                                    loading="lazy" />
-                                            </template>
-                                            <img
-                                                :src="post.imageUrl"
-                                                :class="['x-link', 'x-popover-image']"
-                                                @click="showFullscreenImageDialog(post.imageUrl)"
-                                                loading="lazy" />
-                                        </el-popover>
+                                        <img
+                                            :src="post.imageUrl"
+                                            class="x-link"
+                                            style="
+                                                flex: none;
+                                                width: 60px;
+                                                height: 60px;
+                                                border-radius: 4px;
+                                                object-fit: cover;
+                                            "
+                                            @click="showFullscreenImageDialog(post.imageUrl)"
+                                            loading="lazy" />
                                     </div>
                                     <pre
                                         class="extra"
@@ -1213,7 +1168,6 @@
         userImage,
         userStatusClass,
         formatDateFilter,
-        textToHex,
         debounce
     } from '../../../shared/utils';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
diff --git a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
index 22d06d45..6b258ecd 100644
--- a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
@@ -61,25 +61,11 @@
                 <el-form-item :label="t('dialog.group_post_edit.image')">
                     <template v-if="gallerySelectDialog.selectedFileId">
                         <div style="display: inline-block; flex: none; margin-right: 5px">
-                            <el-popover placement="right" :width="500" trigger="click">
-                                <template #reference>
-                                    <img
-                                        :src="gallerySelectDialog.selectedImageUrl"
-                                        style="
-                                            flex: none;
-                                            width: 60px;
-                                            height: 60px;
-                                            border-radius: 4px;
-                                            object-fit: cover;
-                                        "
-                                        loading="lazy" />
-                                </template>
-                                <img
-                                    :src="gallerySelectDialog.selectedImageUrl"
-                                    :class="['x-link', 'x-popover-image']"
-                                    @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
-                                    loading="lazy" />
-                            </el-popover>
+                            <img
+                                :src="gallerySelectDialog.selectedImageUrl"
+                                style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
+                                @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
+                                loading="lazy" />
                             <el-button size="small" style="vertical-align: top" @click="clearImageGallerySelect">
                                 {{ t('dialog.invite_message.clear_selected_image') }}
                             </el-button>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 919f87fd..ba706cbe 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -7,42 +7,23 @@
         width="770px">
         <div v-loading="userDialog.loading">
             <div style="display: flex">
-                <el-popover
+                <img
                     v-if="
                         !userDialog.loading &&
                         (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
                     "
-                    placement="right"
-                    :width="500"
-                    trigger="click">
-                    <template #reference>
-                        <img
-                            class="x-link"
-                            :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
-                            style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
-                            loading="lazy" />
-                    </template>
-                    <img
-                        :src="userDialog.ref.profilePicOverride"
-                        :class="['x-link', 'x-popover-image']"
-                        @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
-                        loading="lazy" />
-                </el-popover>
-                <el-popover v-else-if="!userDialog.loading" placement="right" :width="500" trigger="click">
-                    <template #reference
-                        ><img
-                            class="x-link"
-                            :src="userDialog.ref.currentAvatarThumbnailImageUrl"
-                            style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
-                            loading="lazy"
-                    /></template>
-
-                    <img
-                        :src="userDialog.ref.currentAvatarImageUrl"
-                        :class="['x-link', 'x-popover-image']"
-                        @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
-                        loading="lazy" />
-                </el-popover>
+                    class="x-link"
+                    :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="x-link"
+                    :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: 1">
@@ -67,18 +48,11 @@
                                     <el-icon><CaretBottom /></el-icon>
                                 </el-tooltip>
                             </template>
-                            <el-popover placement="top" trigger="click">
-                                <template #reference>
-                                    <span
-                                        class="dialog-title"
-                                        style="margin-left: 5px; margin-right: 5px; cursor: pointer"
-                                        v-text="userDialog.ref.displayName"
-                                        @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
-                                </template>
-                                <span style="display: block; text-align: center; font-family: monospace">{{
-                                    textToHex(userDialog.ref.displayName)
-                                }}</span>
-                            </el-popover>
+                            <span
+                                class="dialog-title"
+                                style="margin-left: 5px; margin-right: 5px; cursor: pointer"
+                                v-text="userDialog.ref.displayName"
+                                @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
                             <el-tooltip
                                 v-if="userDialog.ref.pronouns"
                                 placement="top"
@@ -99,22 +73,11 @@
                             </el-tooltip>
                             <template v-if="userDialog.ref.id === currentUser.id">
                                 <br />
-                                <el-popover placement="top" trigger="click">
-                                    <template #reference>
-                                        <span
-                                            class="x-grey"
-                                            style="
-                                                margin-right: 10px;
-                                                font-family: monospace;
-                                                font-size: 12px;
-                                                cursor: pointer;
-                                            "
-                                            v-text="currentUser.username"></span>
-                                    </template>
-                                    <span style="display: block; text-align: center; font-family: monospace">{{
-                                        textToHex(currentUser.username)
-                                    }}</span>
-                                </el-popover>
+                                <span
+                                    class="x-grey"
+                                    style="margin-right: 10px; font-family: monospace; font-size: 12px; cursor: pointer"
+                                    v-text="currentUser.username"
+                                    @click="copyUserDisplayName(currentUser.username)"></span>
                             </template>
                         </div>
                         <div style="margin-top: 5px" v-show="!userDialog.loading">
@@ -300,26 +263,12 @@
                     </div>
 
                     <div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px">
-                        <el-popover placement="right" :width="500" trigger="click">
-                            <template #reference>
-                                <img
-                                    class="x-link"
-                                    :src="userImage(userDialog.ref, true, '256', true)"
-                                    style="
-                                        flex: none;
-                                        width: 120px;
-                                        height: 120px;
-                                        border-radius: 12px;
-                                        object-fit: cover;
-                                    "
-                                    loading="lazy" />
-                            </template>
-                            <img
-                                :src="userDialog.ref.userIcon"
-                                :class="['x-link', 'x-popover-image']"
-                                @click="showFullscreenImageDialog(userDialog.ref.userIcon)"
-                                loading="lazy" />
-                        </el-popover>
+                        <img
+                            class="x-link"
+                            :src="userImage(userDialog.ref, true, '256', true)"
+                            style="flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover"
+                            @click="showFullscreenImageDialog(userDialog.ref.userIcon)"
+                            loading="lazy" />
                     </div>
 
                     <div style="flex: none">
@@ -719,34 +668,24 @@
                                     "
                                     class="extra">
                                     <div style="display: inline-block; flex: none; margin-right: 5px">
-                                        <el-popover placement="right" :width="500" trigger="click">
-                                            <template #reference>
-                                                <el-image
-                                                    v-loading="userDialog.isRepresentedGroupLoading"
-                                                    class="x-link"
-                                                    :src="userDialog.representedGroup.$thumbnailUrl"
-                                                    style="
-                                                        flex: none;
-                                                        width: 60px;
-                                                        height: 60px;
-                                                        border-radius: 4px;
-                                                        object-fit: cover;
-                                                    "
-                                                    :style="{
-                                                        background: userDialog.isRepresentedGroupLoading
-                                                            ? '#f5f7fa'
-                                                            : ''
-                                                    }"
-                                                    @load="userDialog.isRepresentedGroupLoading = false">
-                                                    <template #error></template>
-                                                </el-image>
-                                            </template>
-                                            <img
-                                                :src="userDialog.representedGroup.iconUrl"
-                                                :class="['x-link', 'x-popover-image']"
-                                                @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)"
-                                                loading="lazy" />
-                                        </el-popover>
+                                        <el-image
+                                            v-loading="userDialog.isRepresentedGroupLoading"
+                                            class="x-link"
+                                            :src="userDialog.representedGroup.$thumbnailUrl"
+                                            style="
+                                                flex: none;
+                                                width: 60px;
+                                                height: 60px;
+                                                border-radius: 4px;
+                                                object-fit: cover;
+                                            "
+                                            :style="{
+                                                background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
+                                            }"
+                                            @load="userDialog.isRepresentedGroupLoading = false"
+                                            @click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
+                                            <template #error></template>
+                                        </el-image>
                                     </div>
                                     <span
                                         v-if="userDialog.representedGroup.isRepresenting"
@@ -1830,7 +1769,6 @@
         userOnlineFor,
         userOnlineForTimestamp,
         userStatusClass,
-        textToHex,
         formatDateFilter,
         getFaviconUrl
     } from '../../../shared/utils';
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 56b43010..b22f4396 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -7,20 +7,12 @@
         width="770px">
         <div v-loading="worldDialog.loading">
             <div style="display: flex">
-                <el-popover placement="right" :width="500" trigger="click">
-                    <template #reference>
-                        <img
-                            :src="worldDialog.ref.thumbnailImageUrl"
-                            class="x-link"
-                            style="flex: none; width: 160px; height: 120px; border-radius: 12px"
-                            loading="lazy" />
-                    </template>
-                    <img
-                        :src="worldDialog.ref.imageUrl"
-                        :class="['x-link', 'x-popover-image']"
-                        @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
-                        loading="lazy" />
-                </el-popover>
+                <img
+                    :src="worldDialog.ref.thumbnailImageUrl"
+                    class="x-link"
+                    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: 1">
                         <div>
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index e4637ce7..c54c5b47 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -126,36 +126,20 @@
             <el-table-column :label="t('table.notification.photo')" width="100" prop="photo">
                 <template #default="scope">
                     <template v-if="scope.row.details && scope.row.details.imageUrl">
-                        <el-popover placement="right" :width="500" trigger="click">
-                            <template #reference>
-                                <img
-                                    class="x-link"
-                                    :src="getSmallThumbnailUrl(scope.row.details.imageUrl)"
-                                    style="flex: none; height: 50px; border-radius: 4px"
-                                    loading="lazy" />
-                            </template>
-                            <img
-                                :src="scope.row.details.imageUrl"
-                                :class="['x-link', 'x-popover-image']"
-                                @click="showFullscreenImageDialog(scope.row.details.imageUrl)"
-                                loading="lazy" />
-                        </el-popover>
+                        <img
+                            class="x-link"
+                            :src="getSmallThumbnailUrl(scope.row.details.imageUrl)"
+                            style="flex: none; height: 50px; border-radius: 4px"
+                            @click="showFullscreenImageDialog(scope.row.details.imageUrl)"
+                            loading="lazy" />
                     </template>
                     <template v-else-if="scope.row.imageUrl">
-                        <el-popover placement="right" :width="500" trigger="click">
-                            <template #reference>
-                                <img
-                                    class="x-link"
-                                    :src="getSmallThumbnailUrl(scope.row.imageUrl)"
-                                    style="flex: none; height: 50px; border-radius: 4px"
-                                    loading="lazy" />
-                            </template>
-                            <img
-                                :src="scope.row.imageUrl"
-                                :class="['x-link', 'x-popover-image']"
-                                @click="showFullscreenImageDialog(scope.row.imageUrl)"
-                                loading="lazy" />
-                        </el-popover>
+                        <img
+                            class="x-link"
+                            :src="getSmallThumbnailUrl(scope.row.imageUrl)"
+                            style="flex: none; height: 50px; border-radius: 4px"
+                            @click="showFullscreenImageDialog(scope.row.imageUrl)"
+                            loading="lazy" />
                     </template>
                 </template>
             </el-table-column>
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index 2115fcc9..a6891cdc 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -2,20 +2,12 @@
     <div v-show="menuActiveIndex === 'playerList'" class="x-container" style="padding-top: 5px">
         <div style="display: flex; flex-direction: column; height: 100%">
             <div v-if="currentInstanceWorld.ref.id" style="display: flex">
-                <el-popover placement="right" :width="500" trigger="click" style="height: 120px">
-                    <template #reference>
-                        <img
-                            :src="currentInstanceWorld.ref.thumbnailImageUrl"
-                            class="x-link"
-                            style="flex: none; width: 160px; height: 120px; border-radius: 4px"
-                            loading="lazy" />
-                    </template>
-                    <img
-                        :src="currentInstanceWorld.ref.imageUrl"
-                        :class="['x-link', 'x-popover-image']"
-                        @click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
-                        loading="lazy" />
-                </el-popover>
+                <img
+                    :src="currentInstanceWorld.ref.thumbnailImageUrl"
+                    class="x-link"
+                    style="flex: none; width: 160px; height: 120px; border-radius: 4px"
+                    @click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
+                    loading="lazy" />
                 <div style="margin-left: 10px; display: flex; flex-direction: column; min-width: 320px; width: 100%">
                     <div>
                         <span