From b946b3a3151fc8d1023527411cd95ac351e98686 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 25 Sep 2025 20:26:44 +0530
Subject: [PATCH] [WEB-4981] fix: analytics modal portal (#7852)

---
 .../analytics/work-items/modal/index.tsx      | 61 ++++++++-----------
 1 file changed, 27 insertions(+), 34 deletions(-)

diff --git a/apps/web/core/components/analytics/work-items/modal/index.tsx b/apps/web/core/components/analytics/work-items/modal/index.tsx
index 895e23eed..bb8e465db 100644
--- a/apps/web/core/components/analytics/work-items/modal/index.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/index.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane package imports
-import { createPortal } from "react-dom";
+import { ModalPortal, EPortalWidth, EPortalPosition } from "@plane/propel/portal";
 import { ICycle, IModule, IProject } from "@plane/types";
-import { cn } from "@plane/utils";
 import { useAnalytics } from "@/hooks/store/use-analytics";
 // plane web components
 import { WorkItemsModalMainContent } from "./content";
@@ -32,41 +31,35 @@ export const WorkItemsModal: React.FC<Props> = observer((props) => {
     updateIsEpic(isPeekView ? (isEpic ?? false) : false);
   }, [isEpic, updateIsEpic, isPeekView]);
 
-  const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
-
-  if (!isOpen) return null;
-
-  const content = (
-    <div className={cn("z-[25] h-full w-full overflow-y-auto absolute")}>
+  return (
+    <ModalPortal
+      isOpen={isOpen}
+      onClose={handleClose}
+      width={fullScreen ? EPortalWidth.FULL : EPortalWidth.THREE_QUARTER}
+      position={EPortalPosition.RIGHT}
+      fullScreen={fullScreen}
+    >
       <div
-        className={`top-0 right-0 z-[25] h-full bg-custom-background-100 shadow-custom-shadow-md absolute ${
-          fullScreen ? "w-full p-2" : "w-1/2"
+        className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+          fullScreen ? "rounded-lg border m-2" : "border-l"
         }`}
       >
-        <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"
-          }`}
-        >
-          <WorkItemsModalHeader
-            fullScreen={fullScreen}
-            handleClose={handleClose}
-            setFullScreen={setFullScreen}
-            title={projectDetails?.name ?? ""}
-            cycle={cycleDetails}
-            module={moduleDetails}
-          />
-          <WorkItemsModalMainContent
-            fullScreen={fullScreen}
-            projectDetails={projectDetails}
-            cycleDetails={cycleDetails}
-            moduleDetails={moduleDetails}
-            isEpic={isEpic}
-          />
-        </div>
+        <WorkItemsModalHeader
+          fullScreen={fullScreen}
+          handleClose={handleClose}
+          setFullScreen={setFullScreen}
+          title={projectDetails?.name ?? ""}
+          cycle={cycleDetails}
+          module={moduleDetails}
+        />
+        <WorkItemsModalMainContent
+          fullScreen={fullScreen}
+          projectDetails={projectDetails}
+          cycleDetails={cycleDetails}
+          moduleDetails={moduleDetails}
+          isEpic={isEpic}
+        />
       </div>
-    </div>
+    </ModalPortal>
   );
-
-  return portalContainer ? createPortal(content, portalContainer) : content;
 });