finished modal movement

src/components/Notifications/TheNotificationProvider.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   teleport(:to="appContainer")
-  .absolute.bottom-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
+  .absolute.top-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
     .pt-32(v-if="displayPadding")
     .flex.gap-2.flex-col.relative
       transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
@@ -54,7 +54,7 @@ export default {
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(-30px);
   pointer-events: none;
 }
 </style>

src/components/TheHeader.vue

@@ -155,8 +155,3 @@ export default {
   border-radius: 4px
   background-color: var(--default-white)
 </style>
-
-<style lang="sass">
-.q-menu
-  z-index: 40 !important
-</style>

src/components/base/BaseClientFormCreate.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable )
+  base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable, height="696px" )
     .wrapper-create.gap-y-8.flex.flex-col.pt-8
       .flex.gap-x-4.h-fit
         .flex.gap-x-3.w-full
@@ -525,11 +525,4 @@ export default {
   background-repeat: no-repeat
   background-position: center
   background-image: url(@/assets/icons/download.svg)
-
-.modal
-  max-width: 1220px
-  max-height: 794px
-  width: 1220px
-  height: 794px
-  background-color: var(--default-white)
 </style>

src/components/base/BaseModal.vue

@@ -5,7 +5,7 @@
     @hide="onHide",
     ref="dialog"
     )
-    .base-content(ref="contentRef", :style="contentStyles")
+    .base-content(:class="{'draggable': draggable}", ref="contentRef", :style="{...contentStyles, height}")
       q-resize-observer(@resize="onResize")
       .base-header(draggable, :class="{'cursor-move': draggable}", ref="headerRef")
         .header-title.text {{ title }}
@@ -25,13 +25,13 @@ export default {
     showCloseIcon: Boolean,
     draggable: Boolean,
     hideOverlay: Boolean,
+    height: {
+      type: String,
+    },
   },
   data() {
     return {
-      contentStyles: {
-        top: 0,
-        left: 0,
-      },
+      contentStyles: {},
     };
   },
   methods: {
@@ -64,6 +64,8 @@ export default {
       )
         this.contentStyles.top =
           parseInt(originalStyles.top) + e.movementY + "px";
+      this.contentStyles.bottom = "unset";
+      this.contentStyles.right = "unset";
     },
 
     onLetGo() {
@@ -106,6 +108,12 @@ export default {
     } else backdropEl.style.background = "rgba(0,0,0,0)";
     console.log("123");
   },
+  watch: {
+    value(val) {
+      if (val || !this.draggable) return;
+      this.contentStyles = {};
+    },
+  },
 };
 </script>
 
@@ -125,7 +133,10 @@ export default {
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   border-radius: 4px
-  position: relative
+  &.draggable
+    position: fixed
+    bottom: 10px
+    right: 10px
 
 .header-title
   font-weight: 700