fix: dialog vertical alignment

src/components/dialogs/SafeDialog.vue

@@ -5,7 +5,8 @@
         v-bind="attrs"
         :close-on-click-modal="false"
         @open="handleOpen"
-        @close="handleClose">
+        @close="handleClose"
+        :top="marginTop">
         <slot></slot>
 
         <template v-if="slots.title" #title>
@@ -38,6 +39,7 @@
     const mouseDownOnWrapper = ref(false);
     const styleObserver = ref(null);
     const resizeObserver = ref(null);
+    const marginTop = ref('5px');
     let handleResize = null;
 
     const handleOpen = () => {
@@ -46,7 +48,7 @@
         nextTick(() => {
             addWrapperListeners();
             removeTitleAttribute();
-            centerDialog();
+            adjustDialogMarginTop();
         });
     };
 
@@ -118,50 +120,22 @@
         mouseDownOnWrapper.value = false;
     };
 
-    const centerDialog = () => {
+    const adjustDialogMarginTop = () => {
         const wrapper = elDialogRef.value?.$el;
         if (!wrapper) return;
 
         const dialog = wrapper.querySelector('.el-dialog');
         if (!dialog) return;
 
-        const applyCenterStyle = () => {
+        const applyStyle = () => {
             const dialogHeight = dialog.offsetHeight;
             const viewportHeight = window.innerHeight;
 
-            let marginTop;
+            const topOffset = Math.max(0, (viewportHeight - dialogHeight) * 0.2);
-            if (dialogHeight >= viewportHeight) {
+            marginTop.value = `${topOffset}px`;
-                marginTop = '25px';
-            } else {
-                const topOffset = Math.max(0, (viewportHeight - dialogHeight) / 2);
-                marginTop = `${topOffset}px`;
-            }
-
-            dialog.style.setProperty('margin-top', marginTop, 'important');
         };
 
-        applyCenterStyle();
+        applyStyle();
-
-        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(() => {