04/18 fix web app responsive 4

app/static/js/vault.js

@@ -2737,4 +2737,37 @@ const Vault = (() => {
   return { init };
 })();
 
+/**
+ * Cross-browser viewport height fix.
+ *
+ * Problem: Chrome on Android uses a fixed `100vh` that includes the address bar,
+ * causing overflow when the bar is visible. Safari uses a collapsing bar model.
+ * `dvh` (dynamic viewport height) fixes this but only in Chrome 108+ / Safari 15.4+.
+ *
+ * Solution: Set `--vh` = 1% of window.innerHeight (the *actual* visible height).
+ * CSS uses `calc(var(--vh, 1vh) * 100)` instead of `100vh` everywhere.
+ * On resize (Chrome address bar show/hide, orientation change) we update --vh.
+ */
+(function setViewportHeight() {
+  function update() {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  }
+  update();
+  // Use ResizeObserver for Chrome (fires on address bar show/hide)
+  if (window.ResizeObserver) {
+    new ResizeObserver(update).observe(document.documentElement);
+  }
+  // Fallback: listen to resize and orientationchange
+  window.addEventListener("resize", update, { passive: true });
+  window.addEventListener(
+    "orientationchange",
+    () => {
+      // Small delay: orientation change fires before innerHeight updates
+      setTimeout(update, 100);
+    },
+    { passive: true },
+  );
+})();
+
 document.addEventListener("DOMContentLoaded", Vault.init);