public/assets/css/style.css

@@ -535,15 +535,9 @@ input[type=number] {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   z-index: 10;
   width: 860px;
-  height: 600px;
-  min-width: 480px;
-  max-width: 75vw;
-  min-height: 250px;
-  max-height: 70vh;
+  max-height: 600px;
   display: flex;
   flex-direction: column;
-  resize: both;
-  overflow: hidden;
 }
 
 .popup-header {
@@ -553,12 +547,6 @@ 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/ElementPopup.vue

@@ -21,7 +21,6 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
         <div class="field field-font">
           <label class="label-with-tooltip" data-css="font-family">Police</label>
-          <p class="info-default">Valeur par défaut : {{ textDefaults.fontFamily === 'sans-serif' ? 'Police système (sans-serif)' : textDefaults.fontFamily }}</p>
           <div class="field-font__options">
             <select v-model="fontFamily">
               <option value="sans-serif">Police système (sans-serif)</option>
@@ -44,7 +43,6 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
         <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
-          <p class="info-default">Valeur par défaut : {{ textDefaults.fontSize.value }}{{ textDefaults.fontSize.unit }}</p>
           <InputWithUnit
             v-model="fontSizeModel"
             :units="['px']"
@@ -60,7 +58,6 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
         <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
-          <p class="info-default">Valeur par défaut : {{ textDefaults.lineHeight.value }}{{ textDefaults.lineHeight.unit }}</p>
           <InputWithUnit
             v-model="lineHeightModel"
             :units="['px']"
@@ -90,7 +87,6 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
         <div class="field field-simple">
           <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
-          <p class="info-default">Valeur par défaut : {{ textDefaults.color }}</p>
           <div class="input-with-color">
             <input
               ref="colorInput"

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" @mousedown="startDrag">
+    <div class="popup-header">
       <div class="header-left">
         <slot name="header-left" />
       </div>
@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { usePopupPosition } from '../../composables/usePopupPosition';
 import { initColoris } from '../../composables/useColoris';
@@ -111,37 +111,6 @@ 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;