diff --git a/.changeset/soft-pots-return.md b/.changeset/soft-pots-return.md new file mode 100644 index 0000000000..2e874ea8eb --- /dev/null +++ b/.changeset/soft-pots-return.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Fix DangerDialog body scroll behaviour when containing a form: the dialog's confirm and cancel buttons should now always be visible in the viewport, never scrolling with the other dialog content. \ No newline at end of file diff --git a/app/components/primer/open_project/danger_dialog_form_helper.ts b/app/components/primer/open_project/danger_dialog_form_helper.ts index c09d6172b2..22d49e3f77 100644 --- a/app/components/primer/open_project/danger_dialog_form_helper.ts +++ b/app/components/primer/open_project/danger_dialog_form_helper.ts @@ -6,12 +6,21 @@ const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[da class DangerDialogFormHelperElement extends HTMLElement { @target checkbox: HTMLInputElement | undefined + get form() { + return this.querySelector('form') + } + get submitButton() { return this.querySelector(SUBMIT_BUTTON_SELECTOR)! } connectedCallback() { + // makes the custom element behave as if it doesn't exist in the DOM structure, passing all + // styles directly to its children. this.style.display = 'contents' + if (this.form) { + this.form.style.display = 'contents' + } this.#reset() }