watermark pos bug

src/components/HeroView.vue

@@ -8,19 +8,20 @@ const isDragging = ref(false);
 const dragStart = ref({ x: 0, y: 0 });
 const imgRef = ref<HTMLImageElement | null>(null);
 const containerRef = ref<HTMLElement | null>(null);
-const renderHeight = ref(0);
+const renderRefSize = ref(0); // Min of width/height
 
 let resizeObserver: ResizeObserver | null = null;
 
-const updateHeight = () => {
+const updateSize = () => {
     if (imgRef.value) {
-        renderHeight.value = imgRef.value.clientHeight;
+        // Use the smaller dimension to calculate scale, matching backend logic
+        renderRefSize.value = Math.min(imgRef.value.clientWidth, imgRef.value.clientHeight);
     }
 };
 
 onMounted(() => {
     resizeObserver = new ResizeObserver(() => {
-        updateHeight();
+        updateSize();
     });
 });
 
@@ -33,8 +34,6 @@ watch(imgRef, (el) => {
     if (el && resizeObserver) {
         resizeObserver.disconnect(); // clear old
         resizeObserver.observe(el);
-        // Force update immediately
-        // Wait for load? ResizeObserver usually handles layout shifts
     }
 });
 
@@ -43,13 +42,11 @@ const position = computed(() => {
     if (store.watermarkSettings.manual_override) {
         return store.watermarkSettings.manual_position;
     }
-    return store.selectedImage?.zcaSuggestion ? { x: store.selectedImage.zcaSuggestion.x, y: store.selectedImage.zcaSuggestion.y } : { x: 0.5, y: 0.5 };
+    // Default to bottom center if no ZCA or manual
+    return store.selectedImage?.zcaSuggestion ? { x: store.selectedImage.zcaSuggestion.x, y: store.selectedImage.zcaSuggestion.y } : { x: 0.5, y: 0.98 };
 });
 
 const onMouseDown = (e: MouseEvent) => {
-    // Only allow dragging if target is the watermark itself (or its child)
-    // Actually, user should be able to click watermark to start drag.
-    // e.preventDefault to stop image drag
     e.preventDefault();
     isDragging.value = true;
     dragStart.value = { x: e.clientX, y: e.clientY };
@@ -69,12 +66,9 @@ const onMouseMove = (e: MouseEvent) => {
     let newX = position.value.x + deltaX;
     let newY = position.value.y + deltaY;
     
-    // Clamp logic (Simple 0-1 clamp for center point first)
-    // Ideally we should clamp so the box stays inside, but we don't know the exact text width in px easily here without measurement.
-    // For MVP, clamping center to [0, 1] is "safe enough" to prevent losing it, 
-    // but user asked for "not exceeding boundary".
-    // Visual clamping: slightly inside 0-1.
-    const padding = 0.01; 
+    // Clamp logic (Allow getting very close to edge, padding handled by visual/backend)
+    // Using small padding to prevent sticking perfectly to edge if not desired
+    const padding = 0.005; 
     newX = Math.max(padding, Math.min(1 - padding, newX));
     newY = Math.max(padding, Math.min(1 - padding, newY));
 
@@ -98,27 +92,28 @@ const onMouseLeave = () => {
 
 <template>
   <div 
-    class="w-full h-full flex items-center justify-center bg-black relative p-4 overflow-hidden"
+    class="absolute inset-0 flex items-center justify-center bg-black p-4 overflow-hidden"
     @mousemove="onMouseMove"
     @mouseup="onMouseUp"
     @mouseleave="onMouseLeave"
   >
+    <!-- Wrapper to constrain image -->
     <div 
         v-if="store.selectedImage" 
         ref="containerRef"
-        class="relative inline-flex justify-center items-center image-container" 
-        style="max-width: 100%; max-height: 100%;"
+        class="relative flex justify-center items-center" 
+        style="width: 100%; height: 100%;" 
     >
       <img 
         ref="imgRef"
         :src="convertFileSrc(store.selectedImage.path)" 
-        class="max-w-full max-h-full w-auto h-auto block shadow-lg select-none pointer-events-none"
-        style="max-height: calc(100vh - 10rem);" 
+        class="block shadow-2xl select-none pointer-events-none"
+        style="max-width: 100%; max-height: 100%; object-fit: contain;"
         alt="Hero Image"
         loading="eager"
         decoding="sync"
         fetchpriority="high"
-        @load="updateHeight"
+        @load="updateSize"
         @error="(e) => console.error('Hero Image Load Error:', e)"
       />
       
@@ -132,7 +127,7 @@ const onMouseLeave = () => {
             transform: 'translate(-50%, -50%)',
             opacity: store.watermarkSettings.opacity,
             color: store.watermarkSettings.color,
-            fontSize: (renderHeight * store.watermarkSettings.scale) + 'px',
+            fontSize: (renderRefSize * store.watermarkSettings.scale) + 'px',
             height: '0px', 
             display: 'flex',
             alignItems: 'center',