improved layout customize page

resources/js/admin/mobile/invite-layout/DesignerCanvas.tsx

@@ -682,6 +682,7 @@ export async function createFabricObject({
     content: element.content,
   });
 
+  const hasRotation = typeof element.rotation === 'number' && element.rotation !== 0;
   const baseConfig = {
     left: element.x,
     top: element.y,
@@ -689,6 +690,9 @@ export async function createFabricObject({
     selectable: !readOnly,
     hasBorders: !readOnly,
     hasControls: !readOnly,
+    originX: hasRotation ? 'center' : 'left',
+    originY: hasRotation ? 'center' : 'top',
+    angle: element.rotation ?? 0,
   } as FabricObjectWithId;
 
   switch (element.type) {
@@ -961,6 +965,8 @@ export async function loadImageObject(
       } else {
         // Use direct Image constructor approach for better compatibility
         const img = new Image();
+        // Avoid tainting canvas when reading remote QR images / logos
+        img.crossOrigin = 'anonymous';
         img.onload = () => {
           if (resolved) return;
           console.debug('[Invites][Fabric] image loaded', {

resources/js/admin/mobile/invite-layout/export-utils.ts

@@ -6,6 +6,7 @@ import { FabricRenderOptions, renderFabricLayout } from './DesignerCanvas';
 
 const PDF_PAGE_SIZES: Record<string, { width: number; height: number }> = {
   a4: { width: 595.28, height: 841.89 },
+  a5: { width: 419.53, height: 595.28 },
   letter: { width: 612, height: 792 },
 };