From 6f2433b4514e9d12849db4a51d66f2f485f1c674 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 11 Oct 2025 09:07:11 +0000
Subject: [PATCH] Improve text size in image editor for better visibility

Adjust font size dynamically based on ribbon text length in the image editor component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa
---
 client/src/pages/image-editor.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx
index 0257843..74136c9 100644
--- a/client/src/pages/image-editor.tsx
+++ b/client/src/pages/image-editor.tsx
@@ -260,7 +260,6 @@ export default function ImageEditor() {
           position: absolute;
           color: white;
           font-weight: bold;
-          font-size: 16px;
           z-index: 11;
           text-transform: uppercase;
           white-space: nowrap;
@@ -604,7 +603,14 @@ export default function ImageEditor() {
                           {ribbon.enabled && ribbon.text && (
                             <div className={`ribbon-container ${ribbon.position}`}>
                               <div className={`ribbon-triangle ${ribbon.color}`} />
-                              <div className="ribbon-text">
+                              <div 
+                                className="ribbon-text"
+                                style={{ 
+                                  fontSize: ribbon.text.length <= 5 ? '20px' : 
+                                           ribbon.text.length <= 7 ? '16px' : 
+                                           ribbon.text.length <= 10 ? '13px' : '11px' 
+                                }}
+                              >
                                 {ribbon.text}
                               </div>
                             </div>