Update image rendering in AiEditModal and hooks to draw at top-left corner; adjust text area size for better usability

components/AiEditModal.tsx

@@ -49,7 +49,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
           <img 
             src={imageUrl} 
             alt="Uploaded image preview" 
-            className="max-w-full h-auto max-h-48 rounded border border-slate-300 object-contain mx-auto" 
+            className="w-auto h-40  rounded border border-slate-300 object-contain mx-auto" 
           />
         </div>
 
@@ -63,7 +63,7 @@ const AiEditModal: React.FC<AiEditModalProps> = ({
             onChange={(e) => onPromptChange(e.target.value)}
             placeholder="e.g., 'make the cat wear a party hat', 'change background to a beach'"
             rows={3}
-            className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+            className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-xl"
             disabled={isLoading}
             aria-describedby={error ? "ai-edit-error" : undefined}
           />

hooks/useAiFeatures.ts

@@ -81,9 +81,9 @@ export const useAiFeatures = ({
             drawWidth = Math.max(1, Math.floor(drawWidth));
             drawHeight = Math.max(1, Math.floor(drawHeight));
 
-            // Calculate coordinates to center the image
-            const drawX = (currentCanvasWidth - drawWidth) / 2;
-            const drawY = (currentCanvasHeight - drawHeight) / 2;
+            // Change: Draw image at top-left (0,0)
+            const drawX = 0;
+            const drawY = 0;
 
             tempCtx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
             
@@ -264,4 +264,4 @@ export const useAiFeatures = ({
     handleCancelAiEdit,
     setAiPrompt,
   };
-};
+};

hooks/useCanvasFileUtils.ts

@@ -73,8 +73,9 @@ export const useCanvasFileUtils = ({
               tempCtx.fillStyle = '#FFFFFF';
               tempCtx.fillRect(0, 0, finalCanvasWidth, finalCanvasHeight);
               
-              const drawX = (finalCanvasWidth - imageToDrawWidth) / 2;
-              const drawY = (finalCanvasHeight - imageToDrawHeight) / 2;
+              // Change: Draw image at top-left (0,0)
+              const drawX = 0; 
+              const drawY = 0;
               
               tempCtx.drawImage(img, drawX, drawY, imageToDrawWidth, imageToDrawHeight); 
               const compositeDataURL = tempCanvas.toDataURL('image/png');
@@ -140,4 +141,4 @@ export const useCanvasFileUtils = ({
   }, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast]);
 
   return { handleLoadImageFile, handleExportImage, handleClearCanvas, handleCanvasSizeChange };
-};
+};