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

package/dist/core/shoji-core.css

@@ -149,6 +149,19 @@
   display: none;
   position: fixed;
   inset: 0;
+  /* DESIGN.md §2.6a's fifth real bug: inset:0 alone doesn't stay in sync
+     with a mobile browser's dynamic toolbar (URL bar) collapsing after
+     scroll on some real devices — window.innerHeight grows but the
+     painted box didn't follow, off-centering the photo. A JS-measured
+     visualViewport.height fix worked in emulation but made it *worse* on
+     real hardware (a stale snapshot read before the toolbar's collapse
+     had settled, then applied as an inline height that clobbered this
+     rule and left the dialog short of the real viewport, exposing page
+     content below it). 100dvh is browser-native and continuously live —
+     no JS snapshot to go stale — the correct fix for this whole bug
+     class. Unsupported browsers (all real targets support it) simply
+     keep the plain inset:0 behavior, no worse than before this fix. */
+  height: 100dvh;
   z-index: var(--shoji-z-base);
 }
 

package/dist/core/shoji-core.js

@@ -1902,19 +1902,6 @@ 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();
@@ -2952,10 +2939,6 @@ 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();
@@ -3180,12 +3163,8 @@ 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);