From 0dfd9967688c162417c2cb638e17ee242af19216 Mon Sep 17 00:00:00 2001
From: hudy9x <95471659+hudy9x@users.noreply.github.com>
Date: Thu, 2 May 2024 16:37:40 +0700
Subject: [PATCH] fix: modal with large height is not fully displayed (#170)

---
 .../shared-ui/src/components/Dialog/DialogContent.tsx | 11 ++++++++---
 packages/shared-ui/src/components/Dialog/style.css    | 11 ++++++++---
 .../app/[orgID]/project/[projectId]/TaskUpdate2.tsx   |  2 --
 .../ui-app/app/_components/FileKits/useFileUpload.ts  |  4 ----
 .../_features/ProjectView/ProjectViewModalForm.tsx    |  3 ---
 .../app/_features/ProjectViewFilter/FilterForm.tsx    |  2 --
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/shared-ui/src/components/Dialog/DialogContent.tsx b/packages/shared-ui/src/components/Dialog/DialogContent.tsx
index 0baeacff..f39b0ee8 100644
--- a/packages/shared-ui/src/components/Dialog/DialogContent.tsx
+++ b/packages/shared-ui/src/components/Dialog/DialogContent.tsx
@@ -28,11 +28,16 @@ export default function DialogContent({
 
   return <div
     className={`dialog-wrapper ${open ? "" : 'pointer-events-none -z-10'}`}
+    style={!open ? { overflowY: 'hidden' } : {}}
     onClick={clickOutSide}>
     <div className={`dialog-backdrop ${visible}`}></div>
-    <div onClick={stopPropagation} className={`dialog-content ${classes.join(' ')}`}>
-      <DialogClose />
-      {children}
+    <div className={`${open ? 'overflow-y-auto' : ''} h-full z-10 relative py-[100px]`}>
+      <div className="flex items-center justify-center">
+        <div onClick={stopPropagation} className={`dialog-content ${classes.join(' ')}`}>
+          <DialogClose />
+          {children}
+        </div>
+      </div>
     </div>
   </div>
 }
diff --git a/packages/shared-ui/src/components/Dialog/style.css b/packages/shared-ui/src/components/Dialog/style.css
index 989be969..ab8dbf0d 100644
--- a/packages/shared-ui/src/components/Dialog/style.css
+++ b/packages/shared-ui/src/components/Dialog/style.css
@@ -1,6 +1,7 @@
 .dialog-wrapper {
-  @apply fixed z-50 top-0 left-0 w-full h-full overflow-y-auto;
-  @apply flex items-center justify-center;
+  @apply fixed z-50 top-0 left-0 w-full h-full;
+  /* @apply overflow-y-auto; */
+  /* @apply flex items-center justify-center; */
 }
 
 .dialog-backdrop {
@@ -27,9 +28,13 @@
   max-height: initial;
 }
 
+.dialog-content.show{
+  @apply pointer-events-auto;
+}
+
 .dialog-backdrop.show, 
 .dialog-content.show{
-  @apply pointer-events-auto scale-100;
+  @apply scale-100;
   @apply opacity-100 ;
 }
 
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx
index 2ba19afc..dd6d3102 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx
@@ -26,8 +26,6 @@ function TaskUpdateModal({
     onSubmit: (v: ITaskDefaultValues, cb: () => void) => void
   }) {
 
-  console.log(task.desc)
-
   return <Dialog.Root open={visible} onOpenChange={() => {
     setVisible()
   }}>
diff --git a/packages/ui-app/app/_components/FileKits/useFileUpload.ts b/packages/ui-app/app/_components/FileKits/useFileUpload.ts
index af99387c..9c063816 100644
--- a/packages/ui-app/app/_components/FileKits/useFileUpload.ts
+++ b/packages/ui-app/app/_components/FileKits/useFileUpload.ts
@@ -64,8 +64,6 @@ export default function useFileUpload() {
         type: file.type
       })
 
-      console.log('res', res)
-
       const { name, presignedUrl, url } = res.data.data
       const keyName = name as string
       await storagePutFile(presignedUrl, file)
@@ -181,8 +179,6 @@ export default function useFileUpload() {
       }
     })
 
-    console.log('files items', fileItems)
-
     taskId &&
       fileIds.length &&
       updateTaskData({
diff --git a/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx b/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
index 86d398a3..901a74b2 100644
--- a/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
+++ b/packages/ui-app/app/_features/ProjectView/ProjectViewModalForm.tsx
@@ -35,7 +35,6 @@ export default function ProjectViewModalForm({
   }
 
   const onAdd = () => {
-    console.log(filter, customView)
     setLoading(true)
     addProjectView({
       icon,
@@ -52,8 +51,6 @@ export default function ProjectViewModalForm({
       })
   }
 
-  console.log('type', type)
-
   return (
     <div className="min-h-[500px]">
       <ProjectViewFilterByBoard type={type} desc={desc} onAdd={onAdd} />
diff --git a/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx b/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx
index a0c6d47b..392d011b 100644
--- a/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx
+++ b/packages/ui-app/app/_features/ProjectViewFilter/FilterForm.tsx
@@ -13,8 +13,6 @@ export default function FilterForm({ type }: { type?: ProjectViewType }) {
   const hidden = customView ? '' : 'hidden'
   const { date, point, priority, groupBy, statusIds } = filter
 
-  console.log('type', type)
-
   return (
     <>
       <div className="flex items-center gap-2 mb-3">