fix: canvas displays full image by default with auto-fit zoom

Fixes issue where image was too small to see full item in modal canvas.

Changes:
- Calculate initial zoom to fit entire image in 800x600 canvas
- Don't zoom in (only zoom out to fit), preserving image clarity
- Reset button also resets to fit zoom instead of always 1.0

This ensures users can see the full item from the start and understand
what they're adjusting.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/components/ImageAdjustmentModal.tsx

@@ -45,6 +45,14 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
       setImageDimensions({ width: img.width, height: img.height });
       // Initialize crop bounds to full image
       setCropBounds({ x: 0, y: 0, width: img.width, height: img.height });
+
+      // Calculate initial zoom to fit image in canvas (800x600)
+      const canvasWidth = 800;
+      const canvasHeight = 600;
+      const zoomX = canvasWidth / img.width;
+      const zoomY = canvasHeight / img.height;
+      const fitZoom = Math.min(zoomX, zoomY, 1); // Don't zoom in, only out to fit
+      setZoom(fitZoom);
     };
     img.src = imageUrl;
   }, [imageUrl]);
@@ -93,11 +101,17 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
 
   const handleReset = () => {
     setRotation(0);
-    setZoom(1);
     setPanX(0);
     setPanY(0);
     if (imageRef.current) {
       setCropBounds({ x: 0, y: 0, width: imageRef.current.width, height: imageRef.current.height });
+      // Reset to initial fit zoom
+      const canvasWidth = 800;
+      const canvasHeight = 600;
+      const zoomX = canvasWidth / imageRef.current.width;
+      const zoomY = canvasHeight / imageRef.current.height;
+      const fitZoom = Math.min(zoomX, zoomY, 1);
+      setZoom(fitZoom);
     }
   };