Resize dialogs to fit viewport

app/assets/stylesheets/popup.css

@@ -8,7 +8,6 @@
     --popup-item-padding-inline: 0.5rem;
 
     inset: 0 auto auto 50%;
-    max-block-size: 80vh;
     min-inline-size: min(25ch, calc(100dvw - var(--block-space-double)));
     max-inline-size: min(55ch, calc(100dvw - var(--block-space-double)));
     overflow: auto;

app/javascript/controllers/dialog_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { orient } from "helpers/orientation_helpers"
+import { limitHeightToViewport } from "helpers/sizing_helpers"
 
 export default class extends Controller {
   static targets = [ "dialog" ]
@@ -21,6 +22,8 @@ export default class extends Controller {
       orient(this.dialogTarget)
     }
 
+    limitHeightToViewport(this.dialogTarget, true)
+
     this.dialogTarget.setAttribute("aria-hidden", "false")
     this.dispatch("show")
   }
@@ -38,6 +41,7 @@ export default class extends Controller {
     this.dialogTarget.setAttribute("aria-hidden", "true")
     this.dialogTarget.blur()
     orient(this.dialogTarget, false)
+    limitHeightToViewport(this.dialogTarget, false)
   }
 
   closeOnClickOutside({ target }) {

app/javascript/helpers/sizing_helpers.js

@@ -0,0 +1,12 @@
+export function limitHeightToViewport(el, sizing = true, margin = 64) {
+  if (!el) return
+
+  if (sizing) {
+    const rect = el.getBoundingClientRect()
+    const top = Math.max(rect.top, margin)
+    const max = Math.max(0, window.innerHeight - margin - top)
+    el.style.maxHeight = `${max}px`
+  } else {
+    el.style.maxHeight = ""
+  }
+}