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

@@ -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>