From ec5b659ff083298bfea6b44b7751949f8574c7f0 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 16 Aug 2022 15:43:30 +0200
Subject: [PATCH] Fix background scroll on modal

---
 .../src/components/ui/ItFullScreenModal.vue   | 22 ++++++++++++++++++-
 client/tailwind.css                           |  7 ++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ui/ItFullScreenModal.vue b/client/src/components/ui/ItFullScreenModal.vue
index 53ff4e5a..3aec3ba2 100644
--- a/client/src/components/ui/ItFullScreenModal.vue
+++ b/client/src/components/ui/ItFullScreenModal.vue
@@ -1,12 +1,32 @@
 <script setup lang="ts">
 // inspiration https://vuejs.org/examples/#modal
 
+import {onMounted, watch} from "vue";
+import {HTMLElement} from "happy-dom";
+
 const props = defineProps<{
   show: boolean
 }>()
 
 const emits = defineEmits(['closemodal'])
 
+let appElement: HTMLElement | null = null;
+
+watch(() => props.show,
+  (isShown) => isShown && appElement ? appElement.classList.add('no-scroll') : null
+)
+
+onMounted(() => {
+  appElement = document.getElementById('app');
+})
+
+const closeModal = () => {
+  if (appElement) {
+    appElement.classList.remove('no-scroll')
+  }
+  emits('closemodal')
+}
+
 </script>
 
 <template>
@@ -17,7 +37,7 @@ const emits = defineEmits(['closemodal'])
       <button
         type="button"
         class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
-        @click="$emit('closemodal')"
+        @click="closeModal"
       >
         <it-icon-close></it-icon-close>
       </button>
diff --git a/client/tailwind.css b/client/tailwind.css
index a62e7281..d6ff3921 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -90,3 +90,10 @@ svg {
   }
 }
 
+@layer utilities {
+  .no-scroll {
+    height: 100vh;
+    overflow: hidden;
+  }
+}
+