fix: Remove additional padding from JS controller and add directly as a class (#1007)

app/javascript/controllers/viewport_controller.js

@@ -1,46 +1,26 @@
 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)
+    this.boundResize = this.handleResize.bind(this)
 
-    if (this.hasBottomNavTarget) {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateBottomSpacing()
-      })
-      this.resizeObserver.observe(this.bottomNavTarget)
-    }
+    window.addEventListener("resize", this.boundResize)
+    window.addEventListener("orientationchange", this.boundResize)
   }
 
   disconnect() {
-    window.removeEventListener("resize", this.handleResize)
-    window.removeEventListener("orientationchange", this.handleResize)
-
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
+    window.removeEventListener("resize", this.boundResize)
+    window.removeEventListener("orientationchange", this.boundResize)
   }
 
-  handleResize = () => {
+  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`
-  }
 }