refactor: fix using magic numbers

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) {

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) {