chore: use modal for project flock layout

src/app/production/project-flock/layout.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { usePathname, useRouter } from 'next/navigation';
-import Drawer from '@/components/Drawer';
 import React, { ReactNode, useEffect } from 'react';
 import ProjectFlockTable from '@/components/pages/production/project-flock/ProjectFlockTable';
 import { useUiStore } from '@/stores/ui/ui.store';
@@ -55,19 +54,7 @@ export default function ProjectFlockLayout({
         />
       </div>
 
-      {/* Render Drawer only on /add */}
-      {/* <Drawer
-        open={isOpen}
-        setOpen={(v) => {
-          if (!v) router.push('/production/project-flock');
-        }}
-        closeOnBackdropClick={isDetail ? true : false}
-        onBackdropClick={handleBackdropClick}
-        variant='right'
-        zIndex='99999'
-        sidebarContent={isOpen && <div className=''>{children}</div>}
-      /> */}
-
+      {/* Render Modal only on /add */}
       <Modal
         ref={formModal.ref}
         position='end'
@@ -76,7 +63,7 @@ export default function ProjectFlockLayout({
           modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
         }}
       >
-        <div className='w-full min-w-[446px] h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-hidden'>
+        <div className='w-full sm:w-[446px] h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-hidden'>
           {isOpen && children}
         </div>
       </Modal>