From 5e4430e3118cbc0b9aed6e7732330b7ae3aa1c1b Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 27 Aug 2025 21:04:20 +0900
Subject: [PATCH] feat: center dialogs vertically

---
 .../dialogs/FullscreenImageDialog.vue         |  2 +-
 src/components/dialogs/GalleryDialog.vue      |  1 -
 .../dialogs/GroupDialog/GroupDialog.vue       |  1 -
 .../GroupMemberModerationDialog.vue           |  1 -
 src/components/dialogs/SafeDialog.vue         | 81 +++++++++++++++++++
 .../dialogs/UserDialog/UserDialog.vue         |  3 +-
 .../Favorites/dialogs/WorldImportDialog.vue   |  1 -
 .../Settings/dialogs/ChangelogDialog.vue      |  1 -
 .../Settings/dialogs/FeedFiltersDialog.vue    |  1 -
 .../Settings/dialogs/VRChatConfigDialog.vue   |  1 -
 .../Tools/dialogs/GroupCalendarDialog.vue     |  1 -
 .../dialogs/ScreenshotMetadataDialog.vue      |  1 -
 12 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/src/components/dialogs/FullscreenImageDialog.vue b/src/components/dialogs/FullscreenImageDialog.vue
index 6ed954a4..77b86cf5 100644
--- a/src/components/dialogs/FullscreenImageDialog.vue
+++ b/src/components/dialogs/FullscreenImageDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <safe-dialog class="x-dialog" :visible.sync="fullscreenImageDialog.visible" append-to-body top="1vh" width="97vw">
+    <safe-dialog class="x-dialog" :visible.sync="fullscreenImageDialog.visible" append-to-body width="97vw">
         <div>
             <div style="margin: 0 0 5px 5px">
                 <el-button
diff --git a/src/components/dialogs/GalleryDialog.vue b/src/components/dialogs/GalleryDialog.vue
index 692ee19d..eabdceed 100644
--- a/src/components/dialogs/GalleryDialog.vue
+++ b/src/components/dialogs/GalleryDialog.vue
@@ -4,7 +4,6 @@
         :visible="galleryDialogVisible"
         :title="t('dialog.gallery_icons.header')"
         width="97vw"
-        top="5vh"
         append-to-body
         @close="closeGalleryDialog">
         <el-tabs type="card" ref="galleryTabs">
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 82a9da06..9ab46071 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -4,7 +4,6 @@
         :visible.sync="groupDialog.visible"
         :show-close="false"
         width="770px"
-        top="10vh"
         class="x-dialog x-group-dialog">
         <div class="group-banner-image">
             <el-popover placement="right" width="500px" trigger="click">
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index e21c66cf..288337b3 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -4,7 +4,6 @@
         :visible.sync="groupMemberModeration.visible"
         :title="t('dialog.group_member_moderation.header')"
         append-to-body
-        top="5vh"
         width="90vw">
         <div>
             <h3>{{ groupMemberModeration.groupRef.name }}</h3>
diff --git a/src/components/dialogs/SafeDialog.vue b/src/components/dialogs/SafeDialog.vue
index 6ad10ddb..cb89294f 100644
--- a/src/components/dialogs/SafeDialog.vue
+++ b/src/components/dialogs/SafeDialog.vue
@@ -36,6 +36,9 @@
     const elDialogRef = ref(null);
     const wrapperElement = ref(null);
     const mouseDownOnWrapper = ref(false);
+    const styleObserver = ref(null);
+    const resizeObserver = ref(null);
+    let handleResize = null;
 
     const handleOpen = () => {
         emit('open');
@@ -43,6 +46,7 @@
         nextTick(() => {
             addWrapperListeners();
             removeTitleAttribute();
+            centerDialog();
         });
     };
 
@@ -56,6 +60,22 @@
     const handleClose = () => {
         emit('close');
         removeWrapperListeners();
+
+        if (styleObserver.value) {
+            styleObserver.value.disconnect();
+            styleObserver.value = null;
+        }
+
+        if (resizeObserver.value) {
+            resizeObserver.value.disconnect();
+            resizeObserver.value = null;
+        }
+
+        if (handleResize) {
+            window.removeEventListener('resize', handleResize);
+            handleResize = null;
+        }
+
         emit('update:visible', false);
     };
 
@@ -98,7 +118,68 @@
         mouseDownOnWrapper.value = false;
     };
 
+    const centerDialog = () => {
+        const wrapper = elDialogRef.value?.$el;
+        if (!wrapper) return;
+
+        const dialog = wrapper.querySelector('.el-dialog');
+        if (!dialog) return;
+
+        const applyCenterStyle = () => {
+            const dialogHeight = dialog.offsetHeight;
+            const viewportHeight = window.innerHeight;
+
+            let marginTop;
+            if (dialogHeight >= viewportHeight) {
+                marginTop = '25px';
+            } else {
+                const topOffset = Math.max(0, (viewportHeight - dialogHeight) / 2);
+                marginTop = `${topOffset}px`;
+            }
+
+            dialog.style.setProperty('margin-top', marginTop, 'important');
+        };
+
+        applyCenterStyle();
+
+        styleObserver.value = new MutationObserver(() => {
+            applyCenterStyle();
+        });
+
+        styleObserver.value.observe(dialog, {
+            attributes: true,
+            attributeFilter: ['style']
+        });
+
+        handleResize = () => {
+            applyCenterStyle();
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        resizeObserver.value = new ResizeObserver(() => {
+            applyCenterStyle();
+        });
+
+        resizeObserver.value.observe(dialog);
+    };
+
     onBeforeUnmount(() => {
         removeWrapperListeners();
+
+        if (styleObserver.value) {
+            styleObserver.value.disconnect();
+            styleObserver.value = null;
+        }
+
+        if (resizeObserver.value) {
+            resizeObserver.value.disconnect();
+            resizeObserver.value = null;
+        }
+
+        if (handleResize) {
+            window.removeEventListener('resize', handleResize);
+            handleResize = null;
+        }
     });
 </script>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 8ce0acb1..c65f22cf 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -4,8 +4,7 @@
         class="x-dialog x-user-dialog"
         :visible.sync="userDialog.visible"
         :show-close="false"
-        width="770px"
-        top="10vh">
+        width="770px">
         <div v-loading="userDialog.loading">
             <div style="display: flex">
                 <el-popover
diff --git a/src/views/Favorites/dialogs/WorldImportDialog.vue b/src/views/Favorites/dialogs/WorldImportDialog.vue
index 552025f7..7ca25b71 100644
--- a/src/views/Favorites/dialogs/WorldImportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldImportDialog.vue
@@ -4,7 +4,6 @@
         :visible.sync="isVisible"
         :title="t('dialog.world_import.header')"
         width="650px"
-        top="10vh"
         class="x-dialog">
         <div style="display: flex; align-items: center; justify-content: space-between">
             <div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
diff --git a/src/views/Settings/dialogs/ChangelogDialog.vue b/src/views/Settings/dialogs/ChangelogDialog.vue
index 9ba4f8c9..95d65092 100644
--- a/src/views/Settings/dialogs/ChangelogDialog.vue
+++ b/src/views/Settings/dialogs/ChangelogDialog.vue
@@ -4,7 +4,6 @@
         :visible="changeLogDialog.visible"
         :title="t('dialog.change_log.header')"
         width="800px"
-        top="5vh"
         append-to-body
         @close="closeDialog">
         <div v-loading="!changeLogDialog.changeLog" class="changelog-dialog">
diff --git a/src/views/Settings/dialogs/FeedFiltersDialog.vue b/src/views/Settings/dialogs/FeedFiltersDialog.vue
index eeb98087..d2cdc3ad 100644
--- a/src/views/Settings/dialogs/FeedFiltersDialog.vue
+++ b/src/views/Settings/dialogs/FeedFiltersDialog.vue
@@ -3,7 +3,6 @@
         :visible="!!feedFiltersDialogMode"
         :title="dialogTitle"
         width="550px"
-        top="5vh"
         destroy-on-close
         @close="handleDialogClose">
         <div class="toggle-list" style="height: 75vh; overflow-y: auto">
diff --git a/src/views/Settings/dialogs/VRChatConfigDialog.vue b/src/views/Settings/dialogs/VRChatConfigDialog.vue
index cb07dd37..6f2623eb 100644
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -4,7 +4,6 @@
         :visible="isVRChatConfigDialogVisible"
         :title="t('dialog.config_json.header')"
         width="420px"
-        top="10vh"
         @close="closeDialog">
         <div v-loading="loading">
             <div style="font-size: 12px; word-break: keep-all">
diff --git a/src/views/Tools/dialogs/GroupCalendarDialog.vue b/src/views/Tools/dialogs/GroupCalendarDialog.vue
index aa209024..4a48b673 100644
--- a/src/views/Tools/dialogs/GroupCalendarDialog.vue
+++ b/src/views/Tools/dialogs/GroupCalendarDialog.vue
@@ -4,7 +4,6 @@
         :visible="visible"
         :title="t('dialog.group_calendar.header')"
         :show-close="false"
-        top="10vh"
         width="90vw"
         height="80vh"
         @close="closeDialog">
diff --git a/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue b/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
index 35b6e396..347ddf31 100644
--- a/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
+++ b/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
@@ -4,7 +4,6 @@
         :visible="isScreenshotMetadataDialogVisible"
         :title="t('dialog.screenshot_metadata.header')"
         width="1050px"
-        top="10vh"
         @close="closeDialog">
         <div
             v-loading="screenshotMetadataDialog.loading"