Implement package limit notification system

resources/js/admin/pages/components/invite-layout/DesignerCanvas.tsx

@@ -22,6 +22,7 @@ type DesignerCanvasProps = {
   badge: string;
   qrCodeDataUrl: string | null;
   logoDataUrl: string | null;
+  scale?: number;
   layoutKey?: string;
   readOnly?: boolean;
 };
@@ -41,6 +42,7 @@ export function DesignerCanvas({
   badge,
   qrCodeDataUrl,
   logoDataUrl,
+  scale = 1,
   layoutKey,
   readOnly = false,
 }: DesignerCanvasProps): React.JSX.Element {
@@ -343,16 +345,43 @@ export function DesignerCanvas({
     if (!canvas) {
       return;
     }
-    canvas.setZoom(1);
-    canvas.setDimensions(
-      {
-        width: CANVAS_WIDTH,
-        height: CANVAS_HEIGHT,
-      },
-      { cssOnly: true },
-    );
+
+    const normalizedScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+
+    canvas.setZoom(normalizedScale);
+
+    const cssWidth = CANVAS_WIDTH * normalizedScale;
+    const cssHeight = CANVAS_HEIGHT * normalizedScale;
+
+    const element = canvas.getElement();
+    if (element) {
+      element.style.width = `${cssWidth}px`;
+      element.style.height = `${cssHeight}px`;
+    }
+
+    if (canvas.upperCanvasEl) {
+      canvas.upperCanvasEl.style.width = `${cssWidth}px`;
+      canvas.upperCanvasEl.style.height = `${cssHeight}px`;
+    }
+
+    if (canvas.lowerCanvasEl) {
+      canvas.lowerCanvasEl.style.width = `${cssWidth}px`;
+      canvas.lowerCanvasEl.style.height = `${cssHeight}px`;
+    }
+
+    if (canvas.wrapperEl) {
+      canvas.wrapperEl.style.width = `${cssWidth}px`;
+      canvas.wrapperEl.style.height = `${cssHeight}px`;
+    }
+
+    if (containerRef.current) {
+      containerRef.current.style.width = `${cssWidth}px`;
+      containerRef.current.style.height = `${cssHeight}px`;
+    }
+
+    canvas.calcOffset();
     canvas.requestRenderAll();
-  }, []);
+  }, [scale]);
 
   return (
     <div ref={containerRef} className="relative inline-block max-w-full">