Fix background scroll on modal

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>

client/tailwind.css

@@ -90,3 +90,10 @@ svg {
   }
 }
 
+@layer utilities {
+  .no-scroll {
+    height: 100vh;
+    overflow: hidden;
+  }
+}
+