@michaelyagi/shoji 0.1.0-beta.6 → 0.1.0-beta.7

package/dist/core/shoji-core.js

@@ -1902,6 +1902,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "captureGestureStartState", () => {
         this.controlsHiddenAtGestureStart = this.autoHidden;
       });
+      /**
+       * A real mobile bug (DESIGN.md §2.6a): after scrolling far enough to
+       * collapse a mobile browser's own URL bar, `window.innerHeight` grows
+       * but `.shoji-outer`'s painted size didn't follow, off-centering the
+       * photo. `visualViewport.height` reflects the true visible area;
+       * `window`'s `resize` is the fallback where it's unsupported.
+       */
+      __publicField(this, "syncViewportHeight", () => {
+        var _a;
+        if (!this.dom) return;
+        const height = ((_a = window.visualViewport) == null ? void 0 : _a.height) ?? window.innerHeight;
+        this.dom.outer.style.height = `${height}px`;
+      });
       __publicField(this, "onKeydown", (event) => {
         if (document.activeElement instanceof HTMLVideoElement && event.key !== "Escape") return;
         this.onActivity();
@@ -2939,6 +2952,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         naturalSize && !((_a = this.itemList[index]) == null ? void 0 : _a.video) ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0
       );
       this.dom.outer.classList.add("shoji-open");
+      this.syncViewportHeight();
+      if (window.visualViewport)
+        window.visualViewport.addEventListener("resize", this.syncViewportHeight);
+      else window.addEventListener("resize", this.syncViewportHeight);
       document.addEventListener("keydown", this.onKeydown);
       this.focusTrap.activate(this.dom.dialog);
       this.scheduleAutoHide();
@@ -3163,8 +3180,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.opened = false;
       unlockBodyScroll();
       document.removeEventListener("keydown", this.onKeydown);
+      if (window.visualViewport)
+        window.visualViewport.removeEventListener("resize", this.syncViewportHeight);
+      else window.removeEventListener("resize", this.syncViewportHeight);
       this.focusTrap.deactivate();
       (_a = this.dom) == null ? void 0 : _a.outer.classList.remove("shoji-open");
+      if (this.dom) this.dom.outer.style.height = "";
       if (this.dom) this.dom.backdrop.style.opacity = "";
       if (this.autoHideTimer !== null) {
         clearTimeout(this.autoHideTimer);