From 3d6786a587c258253787cbb6bfe66303c33d5648 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 10 Jul 2025 23:22:40 +0200
Subject: [PATCH] fix: make text scale based on preview size

---
 apps/web/src/components/editor/preview-panel.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index b38c52c..926bee8 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -145,6 +145,8 @@ export function PreviewPanel() {
       const fontClassName =
         FONT_CLASS_MAP[element.fontFamily as keyof typeof FONT_CLASS_MAP] || "";
 
+      const scaleRatio = previewDimensions.width / canvasSize.width;
+
       return (
         <div
           key={element.id}
@@ -152,7 +154,7 @@ export function PreviewPanel() {
           style={{
             left: `${50 + (element.x / canvasSize.width) * 100}%`,
             top: `${50 + (element.y / canvasSize.height) * 100}%`,
-            transform: `translate(-50%, -50%) rotate(${element.rotation}deg)`,
+            transform: `translate(-50%, -50%) rotate(${element.rotation}deg) scale(${scaleRatio})`,
             opacity: element.opacity,
             zIndex: 100 + index, // Text elements on top
           }}
@@ -169,7 +171,7 @@ export function PreviewPanel() {
               textDecoration: element.textDecoration,
               padding: "4px 8px",
               borderRadius: "2px",
-              whiteSpace: "pre-wrap",
+              whiteSpace: "nowrap",
               // Fallback for system fonts that don't have classes
               ...(fontClassName === "" && { fontFamily: element.fontFamily }),
             }}