diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index fbfd8f7c2..852787701 100644 --- a/app/assets/stylesheets/popup.css +++ b/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; diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js index e9f8f990c..16204bd28 100644 --- a/app/javascript/controllers/dialog_controller.js +++ b/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 }) { diff --git a/app/javascript/helpers/sizing_helpers.js b/app/javascript/helpers/sizing_helpers.js new file mode 100644 index 000000000..4b7e99645 --- /dev/null +++ b/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 = "" + } +} \ No newline at end of file