From ae1e40aeeefadf67fbad293d13e1d38b64aff449 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Sat, 4 Jul 2026 21:55:14 +0330
Subject: [PATCH] feat: enable portal rendering for ImageCropModal component

---
 assets/admin/components/ImageCropModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/admin/components/ImageCropModal.tsx b/assets/admin/components/ImageCropModal.tsx
index 1b728e51..eed4ea11 100644
--- a/assets/admin/components/ImageCropModal.tsx
+++ b/assets/admin/components/ImageCropModal.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
 import Cropper, { type Area } from 'react-easy-crop';
 import { getCroppedImage } from '../lib/cropImage';
 
@@ -28,7 +29,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
     }
   };
 
-  return (
+  return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" dir="rtl">
       <div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-2xl overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-gray-800">
@@ -70,6 +71,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }