Merge pull request #98 from R0m1k3/dev

Dev

client/src/pages/image-editor.tsx

@@ -630,12 +630,11 @@ export default function ImageEditor() {
                                 logo.position === "south_west" ? "bottom-4 left-4" :
                                 logo.position === "center" ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" :
                                 "top-4 left-4"
-                              } z-10 ${
+                              } z-10 max-w-full max-h-full object-contain`}
-                                logo.size === "small" ? "w-16" :
+                              style={{ 
-                                logo.size === "large" ? "w-32" :
+                                opacity: logo.opacity / 100,
-                                "w-24"
+                                width: logo.size === "small" ? "35%" : logo.size === "large" ? "70%" : "50%"
-                              }`}
+                              }}
-                              style={{ opacity: logo.opacity / 100 }}
                             />
                           )}
                         </div>

server/routes.ts

@@ -674,13 +674,18 @@ export async function registerRoutes(app: Express): Promise<Server> {
             const logoResponse = await fetch(logoUrl);
             const logoBuffer = Buffer.from(await logoResponse.arrayBuffer());
             
-            // Determine logo size based on selection
+            // Determine logo size based on selection with safety cap
-            const logoSizes = {
+            const padding = 20;
-              small: Math.round(width * 0.15),   // 15% of image width
+            const maxLogoWidth = width - (padding * 2);  // Ensure logo fits within canvas
-              medium: Math.round(width * 0.25),  // 25% of image width
+            
-              large: Math.round(width * 0.35)    // 35% of image width
+            const logoSizePercentages = {
+              small: 0.35,   // 35% of image width
+              medium: 0.50,  // 50% of image width
+              large: 0.70    // 70% of image width
             };
-            const logoWidth = logoSizes[logo.size as keyof typeof logoSizes] || logoSizes.medium;
+            
+            const requestedWidth = Math.round(width * logoSizePercentages[logo.size as keyof typeof logoSizePercentages] || logoSizePercentages.medium);
+            const logoWidth = Math.min(requestedWidth, maxLogoWidth);
             
             // Resize logo preserving aspect ratio and apply opacity
             const resizedLogo = await sharp(logoBuffer)
@@ -692,8 +697,13 @@ export async function registerRoutes(app: Express): Promise<Server> {
             const logoMetadata = await sharp(resizedLogo).metadata();
             const logoHeight = logoMetadata.height || logoWidth;
             
+            // Ensure logo fits within height as well
+            const maxLogoHeight = height - (padding * 2);
+            if (logoHeight > maxLogoHeight) {
+              console.warn(`⚠️ Logo height ${logoHeight}px exceeds max ${maxLogoHeight}px, would be clipped`);
+            }
+            
             // Calculate position with padding
-            const padding = 20;
             let logoX = padding;
             let logoY = padding;