From 6a245e121a770d5be1494faf185321868fc06384 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Wed, 20 Mar 2024 12:42:10 +0530
Subject: [PATCH] fix: analytics dialog close on outside click (#3987)

---
 .../analytics/project-modal/modal.tsx         | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/web/components/analytics/project-modal/modal.tsx b/web/components/analytics/project-modal/modal.tsx
index a15c17f4aa..53d54602f6 100644
--- a/web/components/analytics/project-modal/modal.tsx
+++ b/web/components/analytics/project-modal/modal.tsx
@@ -36,32 +36,34 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
           leaveFrom="translate-x-0"
           leaveTo="translate-x-full"
         >
-          <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-            <div
-              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
-                fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
-              }`}
-            >
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Dialog.Panel>
               <div
-                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
-                  fullScreen ? "rounded-lg border" : "border-l"
+                className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+                  fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
                 }`}
               >
-                <ProjectAnalyticsModalHeader
-                  fullScreen={fullScreen}
-                  handleClose={handleClose}
-                  setFullScreen={setFullScreen}
-                  title={cycleDetails?.name ?? moduleDetails?.name ?? projectDetails?.name ?? ""}
-                />
-                <ProjectAnalyticsModalMainContent
-                  fullScreen={fullScreen}
-                  cycleDetails={cycleDetails}
-                  moduleDetails={moduleDetails}
-                  projectDetails={projectDetails}
-                />
+                <div
+                  className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                    fullScreen ? "rounded-lg border" : "border-l"
+                  }`}
+                >
+                  <ProjectAnalyticsModalHeader
+                    fullScreen={fullScreen}
+                    handleClose={handleClose}
+                    setFullScreen={setFullScreen}
+                    title={cycleDetails?.name ?? moduleDetails?.name ?? projectDetails?.name ?? ""}
+                  />
+                  <ProjectAnalyticsModalMainContent
+                    fullScreen={fullScreen}
+                    cycleDetails={cycleDetails}
+                    moduleDetails={moduleDetails}
+                    projectDetails={projectDetails}
+                  />
+                </div>
               </div>
-            </div>
-          </Dialog.Panel>
+            </Dialog.Panel>
+          </div>
         </Transition.Child>
       </Dialog>
     </Transition.Root>