From 307dc725f6a2d23da4c6808edbd274c6a64e7e39 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Sun, 24 Aug 2025 13:00:00 +0530
Subject: [PATCH] [WEB-4746] fix: position peek view relative to app layout

---
 .../analytics/work-items/modal/index.tsx           | 14 +++++++-------
 .../core/components/issues/peek-overview/view.tsx  |  6 +++---
 2 files changed, 10 insertions(+), 10 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 4852a0bd554..2ff0809bc2d 100644
--- a/apps/web/core/components/analytics/work-items/modal/index.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/index.tsx
@@ -20,7 +20,7 @@ type Props = {
 
 export const WorkItemsModal: React.FC<Props> = observer((props) => {
   const { isOpen, onClose, projectDetails, moduleDetails, cycleDetails, isEpic } = props;
-  const { updateIsEpic } = useAnalytics();
+  const { updateIsEpic, isPeekView } = useAnalytics();
   const [fullScreen, setFullScreen] = useState(false);
 
   const handleClose = () => {
@@ -29,18 +29,18 @@ export const WorkItemsModal: React.FC<Props> = observer((props) => {
   };
 
   useEffect(() => {
-    updateIsEpic(isEpic ?? false);
-  }, [isEpic, updateIsEpic]);
+    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("inset-0 z-[25] h-full w-full overflow-y-auto", fullScreen ? "absolute" : "fixed")}>
+    <div className={cn("z-[25] h-full w-full overflow-y-auto absolute")}>
       <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"
+        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"
         }`}
       >
         <div
@@ -67,5 +67,5 @@ export const WorkItemsModal: React.FC<Props> = observer((props) => {
     </div>
   );
 
-  return fullScreen && portalContainer ? createPortal(content, portalContainer) : content;
+  return portalContainer ? createPortal(content, portalContainer) : content;
 });
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index e06a4839759..bbae72db332 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -110,16 +110,16 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   const peekOverviewIssueClassName = cn(
     !embedIssue
-      ? "fixed z-[25] flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
+      ? "absolute z-[25] flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
       : `w-full h-full`,
     !embedIssue && {
-      "top-2 bottom-2 right-2 w-full md:w-[50%] border-0 border-l": peekMode === "side-peek",
+      "top-0 bottom-0 right-0 w-full md:w-[50%] border-0 border-l": peekMode === "side-peek",
       "size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
       "inset-0 m-4 absolute": peekMode === "full-screen",
     }
   );
 
-  const shouldUsePortal = !embedIssue && peekMode === "full-screen";
+  const shouldUsePortal = !embedIssue;
 
   const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;