From 20e36194b4182437e821c8ca9ffadfdbd923affd Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Sun, 3 Sep 2023 11:25:37 +0530
Subject: [PATCH] fix: peek overview layout switch (#2064)

---
 .../issues/peek-overview/layout.tsx           | 60 ++++++++++---------
 .../issues/peek-overview/layout.tsx           | 24 ++++----
 2 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/apps/app/components/issues/peek-overview/layout.tsx b/apps/app/components/issues/peek-overview/layout.tsx
index 40737b6e8..57bcb904c 100644
--- a/apps/app/components/issues/peek-overview/layout.tsx
+++ b/apps/app/components/issues/peek-overview/layout.tsx
@@ -151,35 +151,37 @@ export const IssuePeekOverview: React.FC<Props> = observer(
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Panel
-                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                    peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                  }`}
-                >
-                  {peekOverviewMode === "modal" && (
-                    <SidePeekView
-                      handleClose={handleClose}
-                      handleDeleteIssue={() => setDeleteIssueModal(true)}
-                      handleUpdateIssue={handleUpdateIssue}
-                      issue={issue}
-                      mode={peekOverviewMode}
-                      readOnly={readOnly}
-                      setMode={(mode) => setPeekOverviewMode(mode)}
-                      workspaceSlug={workspaceSlug}
-                    />
-                  )}
-                  {peekOverviewMode === "full" && (
-                    <FullScreenPeekView
-                      handleClose={handleClose}
-                      handleDeleteIssue={() => setDeleteIssueModal(true)}
-                      handleUpdateIssue={handleUpdateIssue}
-                      issue={issue}
-                      mode={peekOverviewMode}
-                      readOnly={readOnly}
-                      setMode={(mode) => setPeekOverviewMode(mode)}
-                      workspaceSlug={workspaceSlug}
-                    />
-                  )}
+                <Dialog.Panel>
+                  <div
+                    className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                    }`}
+                  >
+                    {peekOverviewMode === "modal" && (
+                      <SidePeekView
+                        handleClose={handleClose}
+                        handleDeleteIssue={() => setDeleteIssueModal(true)}
+                        handleUpdateIssue={handleUpdateIssue}
+                        issue={issue}
+                        mode={peekOverviewMode}
+                        readOnly={readOnly}
+                        setMode={(mode) => setPeekOverviewMode(mode)}
+                        workspaceSlug={workspaceSlug}
+                      />
+                    )}
+                    {peekOverviewMode === "full" && (
+                      <FullScreenPeekView
+                        handleClose={handleClose}
+                        handleDeleteIssue={() => setDeleteIssueModal(true)}
+                        handleUpdateIssue={handleUpdateIssue}
+                        issue={issue}
+                        mode={peekOverviewMode}
+                        readOnly={readOnly}
+                        setMode={(mode) => setPeekOverviewMode(mode)}
+                        workspaceSlug={workspaceSlug}
+                      />
+                    )}
+                  </div>
                 </Dialog.Panel>
               </Transition.Child>
             </div>
diff --git a/apps/space/components/issues/peek-overview/layout.tsx b/apps/space/components/issues/peek-overview/layout.tsx
index abb76db48..09cfa5b78 100644
--- a/apps/space/components/issues/peek-overview/layout.tsx
+++ b/apps/space/components/issues/peek-overview/layout.tsx
@@ -106,17 +106,19 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Panel
-                className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                  issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                }`}
-              >
-                {issueDetailStore.peekMode === "modal" && (
-                  <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
-                )}
-                {issueDetailStore.peekMode === "full" && (
-                  <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
-                )}
+              <Dialog.Panel>
+                <div
+                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                    issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                  }`}
+                >
+                  {issueDetailStore.peekMode === "modal" && (
+                    <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+                  )}
+                  {issueDetailStore.peekMode === "full" && (
+                    <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
+                  )}
+                </div>
               </Dialog.Panel>
             </Transition.Child>
           </div>