From b05d5e12fe2940b189812f6ceddea95d91c7ccec Mon Sep 17 00:00:00 2001
From: QuantumEntangledAndy <sheepchaan@gmail.com>
Date: Thu, 10 Oct 2024 10:41:40 +0700
Subject: [PATCH] Use a resize observer to center the popup after an image is
 loaded when polyfilled

---
 public/scripts/popup.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/public/scripts/popup.js b/public/scripts/popup.js
index ef86c48e9..e83b3dbba 100644
--- a/public/scripts/popup.js
+++ b/public/scripts/popup.js
@@ -182,6 +182,14 @@ export class Popup {
         if (!this.dlg.showModal) {
             this.dlg.classList.add('poly_dialog');
             dialogPolyfill.registerDialog(this.dlg);
+            // Force a vertical reposition after the content
+            // (like crop image) has been set
+            const resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    dialogPolyfill.reposition(entry.target);
+                }
+            });
+            resizeObserver.observe(this.dlg);
         }
         this.body = this.dlg.querySelector('.popup-body');
         this.content = this.dlg.querySelector('.popup-content');