popup move handle + resize

public/assets/css/style.css

@@ -535,9 +535,15 @@ input[type=number] {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   z-index: 10;
   width: 860px;
-  max-height: 600px;
+  height: 600px;
+  min-width: 480px;
+  max-width: 75vw;
+  min-height: 250px;
+  max-height: 70vh;
   display: flex;
   flex-direction: column;
+  resize: both;
+  overflow: hidden;
 }
 
 .popup-header {
@@ -547,6 +553,12 @@ input[type=number] {
   padding: 0.75rem 1rem;
   border-bottom: 1px solid #e0e0e0;
   background: #f9f9f9;
+  cursor: grab;
+  user-select: none;
+}
+
+.popup-header:active {
+  cursor: grabbing;
 }
 
 .header-left {

src/components/ui/BasePopup.vue

@@ -4,7 +4,7 @@
     class="settings-popup"
     :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
-    <div class="popup-header">
+    <div class="popup-header" @mousedown="startDrag">
       <div class="header-left">
         <slot name="header-left" />
       </div>
@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { usePopupPosition } from '../../composables/usePopupPosition';
 import { initColoris } from '../../composables/useColoris';
@@ -111,6 +111,37 @@ const inheritanceLocked = ref(true);
 
 const { calculatePosition } = usePopupPosition(props.popupWidth, props.popupHeight);
 
+// Drag handling
+let dragOffset = { x: 0, y: 0 };
+
+const startDrag = (e) => {
+  // Don't drag when clicking the close button
+  if (e.target.closest('.close-btn')) return;
+  dragOffset = {
+    x: e.clientX - position.value.x,
+    y: e.clientY - position.value.y,
+  };
+  document.addEventListener('mousemove', onDrag);
+  document.addEventListener('mouseup', stopDrag);
+};
+
+const onDrag = (e) => {
+  position.value = {
+    x: e.clientX - dragOffset.x,
+    y: e.clientY - dragOffset.y,
+  };
+};
+
+const stopDrag = () => {
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+};
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+});
+
 const highlightedCss = computed(() => {
   if (!props.displayCss) return '';
   return hljs.highlight(props.displayCss, { language: 'css' }).value;