Merge branch 'main' of https://github.com/arc53/DocsGPT into dependabot/npm_and_yarn/frontend/tailwindcss-4.1.10

frontend/src/modals/WrapperModal.tsx

@@ -3,38 +3,33 @@ import { createPortal } from 'react-dom';
 
 import Exit from '../assets/exit.svg';
 
-interface WrapperModalPropsType {
+type WrapperModalPropsType = {
   children: React.ReactNode;
   close: () => void;
   isPerformingTask?: boolean;
   className?: string;
   contentClassName?: string;
-}
+};
 
 export default function WrapperModal({
   children,
   close,
   isPerformingTask = false,
-  className = '', // Default width, but can be overridden
-  contentClassName = '', // Default padding, but can be overridden
+  className = '',
+  contentClassName = '',
 }: WrapperModalPropsType) {
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (isPerformingTask) return;
+
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target as Node)
-      ) {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node))
         close();
-      }
     };
 
     const handleEscapePress = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        close();
-      }
+      if (event.key === 'Escape') close();
     };
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -44,17 +39,17 @@ export default function WrapperModal({
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleEscapePress);
     };
-  }, [close]);
+  }, [close, isPerformingTask]);
 
   const modalContent = (
-    <div className="fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
+    <div className="bg-gray-alpha bg-opacity-50 fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center">
       <div
         ref={modalRef}
-        className={`relative w-11/12 rounded-2xl bg-white p-8 dark:bg-[#26272E] sm:w-[512px] ${className}`}
+        className={`relative w-11/12 rounded-2xl bg-white p-8 sm:w-[512px] dark:bg-[#26272E] ${className}`}
       >
         {!isPerformingTask && (
           <button
-            className="absolute right-4 top-3 z-50 m-2 w-3"
+            className="absolute top-3 right-4 z-50 m-2 w-3"
             onClick={close}
           >
             <img className="filter dark:invert" src={Exit} alt="Close" />