From 8f627f1df05781a87fb091913e9bd8856abd8f82 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Mon, 9 Sep 2024 21:03:59 +0200
Subject: [PATCH] [web] Avoid scrollable page behind the modal dialog

---
 web-src/src/components/ModalDialog.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index 2a315a1f..394dd981 100644
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -8,7 +8,7 @@
             <p v-if="title" class="title is-4" v-text="title" />
             <slot name="modal-content" />
           </div>
-          <footer class="card-footer is-clipped">
+          <footer class="card-footer">
             <a class="card-footer-item has-text-dark" @click="$emit('close')">
               <mdicon class="icon" name="cancel" size="16" />
               <span class="is-size-7" v-text="close_action" />
@@ -51,8 +51,16 @@ export default {
     show: Boolean,
     title: { required: true, type: String }
   },
-  emits: ['delete', 'close', 'ok']
+  emits: ['delete', 'close', 'ok'],
+  watch: {
+    show() {
+      const { classList } = document.querySelector('html')
+      if (this.show) {
+        classList.add('is-clipped')
+      } else {
+        classList.remove('is-clipped')
+      }
+    }
+  }
 }
 </script>
-
-<style></style>