[WEB-4471]fix: full screen view visibility

apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -11,6 +11,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
       <CommandPalette />
       <WorkspaceAuthWrapper>
         <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+          <div id="full-screen-portal" className="inset-0 absolute w-full" />
           <div className="relative flex size-full overflow-hidden">
             <ProjectAppSidebar />
             <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">

apps/web/core/components/analytics/work-items/modal/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Dialog, Transition } from "@headlessui/react";
 // plane package imports
+import { createPortal } from "react-dom";
 import { ICycle, IModule, IProject } from "@plane/types";
+import { cn } from "@plane/utils";
 import { useAnalytics } from "@/hooks/store";
 // plane web components
 import { WorkItemsModalMainContent } from "./content";
@@ -23,57 +24,48 @@ export const WorkItemsModal: React.FC<Props> = observer((props) => {
   const [fullScreen, setFullScreen] = useState(false);
 
   const handleClose = () => {
+    setFullScreen(false);
     onClose();
   };
 
   useEffect(() => {
     updateIsEpic(isEpic ?? false);
   }, [isEpic, updateIsEpic]);
 
-  return (
-    <Transition.Root appear show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="transition-transform duration-300"
-          enterFrom="translate-x-full"
-          enterTo="translate-x-0"
-          leave="transition-transform duration-200"
-          leaveFrom="translate-x-0"
-          leaveTo="translate-x-full"
+  const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
+
+  if (!isOpen) return null;
+
+  const content = (
+    <div className={cn("inset-0 z-[25] h-full w-full overflow-y-auto", fullScreen ? "absolute" : "fixed")}>
+      <div
+        className={`right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+          fullScreen ? "w-full p-2 absolute" : "w-full sm:w-full md:w-1/2 fixed"
+        }`}
+      >
+        <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"
+          }`}
         >
-          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-            <Dialog.Panel>
-              <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={`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}
-                  />
-                </div>
-              </div>
-            </Dialog.Panel>
-          </div>
-        </Transition.Child>
-      </Dialog>
-    </Transition.Root>
+          <WorkItemsModalHeader
+            fullScreen={fullScreen}
+            handleClose={handleClose}
+            setFullScreen={setFullScreen}
+            title={projectDetails?.name ?? ""}
+            cycle={cycleDetails}
+            module={moduleDetails}
+          />
+          <WorkItemsModalMainContent
+            fullScreen={fullScreen}
+            projectDetails={projectDetails}
+            cycleDetails={cycleDetails}
+            moduleDetails={moduleDetails}
+          />
+        </div>
+      </div>
+    </div>
   );
+
+  return fullScreen && portalContainer ? createPortal(content, portalContainer) : content;
 });

apps/web/core/components/gantt-chart/chart/root.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
 // plane imports
 // components
@@ -176,10 +177,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     scrollContainer.scrollLeft = scrollWidth;
   };
 
-  return (
+  const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
+
+  const content = (
     <div
       className={cn("relative flex flex-col h-full select-none rounded-sm bg-custom-background-100 shadow", {
-        "fixed inset-0 z-30 bg-custom-background-100": fullScreenMode,
+        "inset-0 z-[25] bg-custom-background-100": fullScreenMode,
         "border-[0.5px] border-custom-border-200": border,
       })}
     >
@@ -217,4 +220,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
       />
     </div>
   );
+
+  return fullScreenMode && portalContainer ? createPortal(content, portalContainer) : content;
 });