From ecac937e0db66287230d32364292446317401fad Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 11 Oct 2025 09:02:30 +0000
Subject: [PATCH] Adjust banner text positioning and size for better visibility

Update CSS styles in client/src/pages/image-editor.tsx to correct the positioning and sizing of ribbon text elements for improved banner text display.

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 | 34 +++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx
index cb9eff9..980ccac 100644
--- a/client/src/pages/image-editor.tsx
+++ b/client/src/pages/image-editor.tsx
@@ -248,30 +248,46 @@ export default function ImageEditor() {
         }
         
         .ribbon-text.north_west {
-          top: 30px;
-          left: 5px;
+          top: 22px;
+          left: 22px;
           transform: rotate(-45deg);
-          transform-origin: left center;
+          transform-origin: center center;
         }
         
         .ribbon-text.north_east {
-          top: 30px;
-          right: 5px;
+          top: 22px;
+          right: 22px;
           transform: rotate(45deg);
-          transform-origin: right center;
+          transform-origin: center center;
         }
         
         /* Adaptive text sizes for ribbon */
         .ribbon-text.small {
-          font-size: 10px;
+          font-size: 11px;
+          top: 28px;
+          left: 18px;
+        }
+        
+        .ribbon-text.small.north_east {
+          top: 28px;
+          right: 18px;
+          left: auto;
         }
         
         .ribbon-text.medium {
-          font-size: 14px;
+          font-size: 13px;
+          top: 25px;
+          left: 20px;
+        }
+        
+        .ribbon-text.medium.north_east {
+          top: 25px;
+          right: 20px;
+          left: auto;
         }
         
         .ribbon-text.large {
-          font-size: 16px;
+          font-size: 15px;
         }
       `}</style>