From ca3995881f6dfb35ee4fdd18a81f42362b4b4396 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 5 Feb 2026 11:24:20 +0500
Subject: [PATCH] refactor: fix using magic numbers

---
 src/components/image/ImageCropper.svelte | 3 ++-
 src/components/panel/PanelPreview.svelte | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/image/ImageCropper.svelte b/src/components/image/ImageCropper.svelte
index 35bffe7..30ce8e2 100644
--- a/src/components/image/ImageCropper.svelte
+++ b/src/components/image/ImageCropper.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
+  import { PANEL_SETTINGS } from "$lib/constants";
   import type { ImageCropResult } from "$lib/types/panel";
   import { setLoading } from "$stores/uiStore";
   import CropperJS from "cropperjs";
@@ -52,7 +53,7 @@
       }
 
       const canvas = await cropperCanvasElement.$toCanvas({
-        width: 320,
+        width: PANEL_SETTINGS.PANEL_WIDTH,
       });
 
       if (!canvas) {
diff --git a/src/components/panel/PanelPreview.svelte b/src/components/panel/PanelPreview.svelte
index 7957720..78d9959 100644
--- a/src/components/panel/PanelPreview.svelte
+++ b/src/components/panel/PanelPreview.svelte
@@ -65,10 +65,10 @@
 
   function getTextPosition(textItem: TextItem) {
     const panelWidth = PANEL_SETTINGS.PANEL_WIDTH;
-    const paddingX = textItem.paddingX ?? 20;
-    const verticalOffset = textItem.verticalOffset ?? 0;
+    const paddingX = textItem.paddingX;
+    const verticalOffset = textItem.verticalOffset;
     const centerY = panel.height / 2 + verticalOffset;
-    const textWidth = 300;
+    const textWidth = panelWidth - paddingX * 2;
 
     let position;
     switch (textItem.textAlign) {