fix: Viewport issue in PWA (#995)

* fix: move safe-area padding from body/HTML to navbars. Add script to compute app height dynamically.

* fix: Initialize sankey tooltip with top-0 to avoid overflow

* fix: add fallback to HTML height

* fix: properly set bottom spacing and use position fixed for bottom navbar

* fix: move viewport controller initialization

app/javascript/controllers/sankey_chart_controller.js

@@ -349,7 +349,7 @@ export default class extends Controller {
     const dialog = this.element.closest("dialog");
     this.tooltip = d3.select(dialog || document.body)
       .append("div")
-      .attr("class", "bg-gray-700 text-white text-sm p-2 rounded pointer-events-none absolute z-50")
+      .attr("class", "bg-gray-700 text-white text-sm p-2 rounded pointer-events-none absolute z-50 top-0")
       .style("opacity", 0)
       .style("pointer-events", "none");
   }

app/javascript/controllers/viewport_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content", "bottomNav"]
+
+  connect() {
+    this.updateViewport()
+    this.updateBottomSpacing()
+
+    window.addEventListener("resize", this.handleResize)
+    window.addEventListener("orientationchange", this.handleResize)
+
+    if (this.hasBottomNavTarget) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateBottomSpacing()
+      })
+      this.resizeObserver.observe(this.bottomNavTarget)
+    }
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this.handleResize)
+    window.removeEventListener("orientationchange", this.handleResize)
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  }
+
+  handleResize = () => {
+    this.updateViewport()
+    this.updateBottomSpacing()
+  }
+
+  updateViewport() {
+    const height = window.innerHeight
+    document.documentElement.style.setProperty("--app-height", `${height}px`)
+  }
+
+  updateBottomSpacing() {
+    if (!this.hasBottomNavTarget || !this.hasContentTarget) return
+
+    const navHeight = this.bottomNavTarget.offsetHeight
+    this.contentTarget.style.paddingBottom = `${navHeight}px`
+  }
+}