finished modal movement

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