@paroicms/tiny-modal 0.7.8 → 0.7.10

package/dist/tiny-modal.js

@@ -43,17 +43,23 @@ export default function initializeTinyModal({ openButton, dialogContent, modalCl
     }
     function updateCloseButtonPosition() {
         const dialogRect = dialogEl.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
-        // Check if dialog is full height (with small tolerance for rounding)
-        if (Math.abs(dialogRect.height - viewportHeight) < 2) {
+        // Close button is 40px and positioned at -30px outside the dialog
+        // We need at least 30px of space to fit the button outside, plus some margin (5px minimum from edge)
+        const buttonOffset = 30;
+        const minMarginFromEdge = 5;
+        const minSpaceNeeded = buttonOffset + minMarginFromEdge; // 35px
+        // Check if there's enough space at the top for the button
+        const spaceAtTop = dialogRect.top;
+        if (spaceAtTop < minSpaceNeeded) {
             dialogEl.classList.add("fullHeight");
         }
         else {
             dialogEl.classList.remove("fullHeight");
         }
-        // Check if dialog is full width (with small tolerance for rounding)
-        if (Math.abs(dialogRect.width - viewportWidth) < 2) {
+        // Check if there's enough space at the right for the button
+        const spaceAtRight = viewportWidth - dialogRect.right;
+        if (spaceAtRight < minSpaceNeeded) {
             dialogEl.classList.add("fullWidth");
         }
         else {
@@ -66,6 +72,12 @@ export default function initializeTinyModal({ openButton, dialogContent, modalCl
         }
     });
     resizeObserver.observe(dialogEl);
+    const handleWindowResize = () => {
+        if (dialogEl.open) {
+            updateCloseButtonPosition();
+        }
+    };
+    window.addEventListener("resize", handleWindowResize);
     function open() {
         dialogEl.showModal();
         document.body.style.overflow = "hidden";
@@ -80,6 +92,8 @@ export default function initializeTinyModal({ openButton, dialogContent, modalCl
     dialogEl.addEventListener("close", () => {
         document.body.style.removeProperty("overflow");
         document.documentElement.style.removeProperty("overflow");
+        resizeObserver.disconnect();
+        window.removeEventListener("resize", handleWindowResize);
         trigger("close");
     });
     return { open, close, on };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/tiny-modal",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "description": "Tiny modal library for creating modal dialogs",
   "author": "Paroi Team",
   "repository": {
@@ -24,8 +24,8 @@
   "main": "dist/tiny-modal.js",
   "typings": "dist/tiny-modal.d.ts",
   "devDependencies": {
-    "rimraf": "~6.1.0",
-    "sass": "~1.94.0",
+    "rimraf": "~6.1.2",
+    "sass": "~1.94.2",
     "typescript": "~5.9.3"
   },
   "files": [