From 1f5dbe1cc068933b95a117bbcfe15abf6071a3a7 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Tue, 18 Nov 2025 09:06:16 +0000
Subject: [PATCH 1/2] Transitioned from Plan to Build mode

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: e66c2c87-24af-4c93-831c-54dd5331a0ce
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/JgqpaNl

From c15cc72cd1d2fc2c61f6cf26feeb7c2d4a7adf17 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Tue, 18 Nov 2025 09:27:20 +0000
Subject: [PATCH 2/2] Update logo sizing to allow larger logos on images

Modify client-side and server-side logic to adjust logo size constraints, ensuring logos adhere to a maximum percentage of image dimensions and incorporate padding for better placement.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: aee6d999-ad55-471c-8c9a-6033843f313e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/L05E01m
---
 client/src/pages/image-editor.tsx | 11 +++++------
 server/routes.ts                  | 24 +++++++++++++++++-------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx
index 85fbdc6..6f71e0a 100644
--- a/client/src/pages/image-editor.tsx
+++ b/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 ${
-                                logo.size === "small" ? "w-16" :
-                                logo.size === "large" ? "w-32" :
-                                "w-24"
-                              }`}
-                              style={{ opacity: logo.opacity / 100 }}
+                              } z-10 max-w-full max-h-full object-contain`}
+                              style={{ 
+                                opacity: logo.opacity / 100,
+                                width: logo.size === "small" ? "35%" : logo.size === "large" ? "70%" : "50%"
+                              }}
                             />
                           )}
                         </div>
diff --git a/server/routes.ts b/server/routes.ts
index 6b7a4b9..a48291d 100644
--- a/server/routes.ts
+++ b/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
-            const logoSizes = {
-              small: Math.round(width * 0.15),   // 15% of image width
-              medium: Math.round(width * 0.25),  // 25% of image width
-              large: Math.round(width * 0.35)    // 35% of image width
+            // Determine logo size based on selection with safety cap
+            const padding = 20;
+            const maxLogoWidth = width - (padding * 2);  // Ensure logo fits within canvas
+            
+            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;