04/18 fix web app responsive 3

2026-04-18 21:00:19 -04:00
parent ab441ae289
commit 381d35be29
4 changed files with 823 additions and 85 deletions
@@ -2648,24 +2648,46 @@ const Vault = (() => {
    // Mobile sidebar: hamburger opens overlay, backdrop/item-click closes it
    const backdrop = document.getElementById("sidebar-backdrop");
    const mobileMenuBtn = document.getElementById("btn-mobile-menu");
+    const mobileQuery = window.matchMedia("(max-width: 768px)");
+
    function openMobileSidebar() {
      sidebar?.classList.add("mobile-open");
      backdrop?.classList.add("open");
-      document.body.style.overflow = "hidden";
+      // iOS Safari: lock scroll on <html>, not <body>
+      document.documentElement.style.overflow = "hidden";
    }
    function closeMobileSidebar() {
      sidebar?.classList.remove("mobile-open");
      backdrop?.classList.remove("open");
-      document.body.style.overflow = "";
+      document.documentElement.style.overflow = "";
    }
+
    mobileMenuBtn?.addEventListener("click", openMobileSidebar);
+    // Both click and touchstart for responsive feel on iOS
    backdrop?.addEventListener("click", closeMobileSidebar);
-    // Close mobile sidebar whenever a nav item is clicked
+    backdrop?.addEventListener("touchstart", closeMobileSidebar, {
+      passive: true,
+    });
+
+    // Close mobile sidebar whenever a nav item is clicked (mobile only)
    document.querySelectorAll(".sidebar-item").forEach((item) => {
      item.addEventListener("click", () => {
-        if (window.innerWidth <= 640) closeMobileSidebar();
+        if (mobileQuery.matches) closeMobileSidebar();
      });
    });
+
+    // Close on Escape key
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && sidebar?.classList.contains("mobile-open")) {
+        closeMobileSidebar();
+      }
+    });
+
+    // Ensure sidebar is closed and scroll unlocked when switching to desktop
+    mobileQuery.addEventListener("change", (e) => {
+      if (!e.matches) closeMobileSidebar();
+    });
+
    // Mobile FAB mirrors the desktop add-item button
    document
      .getElementById("btn-add-item-mobile")