Worked on zone manager

src/components/utilities/Modal.vue

@@ -4,7 +4,7 @@
       <div class="modal-header" @mousedown="startDrag">
         <slot name="modalHeader" />
         <div class="buttons">
-<!--          <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>-->
+          <!--          <button><img alt="resize" draggable="false" src="/assets/icons/modalFullscreen.svg" /></button>-->
           <button @click="close" v-if="closable"><img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" /></button>
         </div>
       </div>
@@ -45,7 +45,9 @@ const properties = defineProps({
   }
 })
 
-watch(() => properties.isModalOpen, (value) => {
+watch(
+  () => properties.isModalOpen,
+  (value) => {
     isModalOpenRef.value = value
   }
 )
@@ -122,12 +124,16 @@ const stopDrag = () => {
   isDragging.value = false
 }
 
-watch(() => properties.modalWidth, (value) => {
+watch(
+  () => properties.modalWidth,
+  (value) => {
     width.value = value
   }
 )
 
-watch(() => properties.modalHeight, (value) => {
+watch(
+  () => properties.modalHeight,
+  (value) => {
     height.value = value
   }
 )
@@ -148,14 +154,25 @@ onUnmounted(() => {
   removeEventListener('resize', handleResize)
 })
 
-
 // Make sure modal doesn't go off screen
-watch(() => x.value, (value) => {
-    if (value < 0) { x.value = 0 } else if (value + width.value > window.innerWidth) { x.value = window.innerWidth - width.value }
+watch(
+  () => x.value,
+  (value) => {
+    if (value < 0) {
+      x.value = 0
+    } else if (value + width.value > window.innerWidth) {
+      x.value = window.innerWidth - width.value
+    }
   }
 )
-watch(() => y.value, (value) => {
-    if (value < 0) { y.value = 0 } else if (value + height.value > window.innerHeight) { y.value = window.innerHeight - height.value }
+watch(
+  () => y.value,
+  (value) => {
+    if (value < 0) {
+      y.value = 0
+    } else if (value + height.value > window.innerHeight) {
+      y.value = window.innerHeight - height.value
+    }
   }
 )
 
@@ -264,12 +281,12 @@ function handleResize() {
 
         label {
           margin-bottom: 10px;
-          font-family: "Poppins";
+          font-family: 'Poppins';
         }
 
         input {
           max-width: 250px;
-          font-family: "Poppins";
+          font-family: 'Poppins';
           border: 1px solid $cyan;
           border-radius: 5px;
           background-color: rgba($white, 0.8);
@@ -296,4 +313,4 @@ function handleResize() {
     }
   }
 }
-</style>
+</style>