From 6e7a96394a26a4c805b1c1eb53707e14fcc26266 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 23 Nov 2023 18:22:25 +0530
Subject: [PATCH] fix: page scroll area (#2850)

---
 .../src/ui/components/page-renderer.tsx       |  2 +-
 .../src/ui/components/summary-popover.tsx     |  2 +-
 .../editor/document-editor/src/ui/index.tsx   |  6 ++--
 .../document-editor/src/ui/readonly/index.tsx |  6 ++--
 .../projects/[projectId]/pages/[pageId].tsx   | 33 ++++++++++---------
 5 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
index 194152dd3..cff043171 100644
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@@ -18,7 +18,7 @@ export const PageRenderer = (props: IPageRenderer) => {
   } = props;
 
   return (
-    <div className="h-full w-full overflow-y-auto pl-7 py-5">
+    <div className="w-full pl-7 pt-5 pb-64">
       <h1 className="text-4xl font-bold break-all pr-5 -mt-2">
         {documentDetails.title}
       </h1>
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index 7c85ed945..46b99d048 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -44,7 +44,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       </button>
       {!sidePeekVisible && (
         <div
-          className="hidden group-hover/summary-popover:block z-10 h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3"
+          className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3"
           ref={setPopperElement}
           style={summaryPopoverStyles.popper}
           {...summaryPopoverAttributes.popper}
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index f46c5ca47..d0f0bd96c 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useState } from "react";
-import { cn, getEditorClassNames, useEditor } from "@plane/editor-core";
+import { getEditorClassNames, useEditor } from "@plane/editor-core";
 import { DocumentEditorExtensions } from "./extensions";
 import {
   IDuplicationConfig,
@@ -126,8 +126,8 @@ const DocumentEditor = ({
         archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
         documentDetails={documentDetails}
       />
-      <div className="h-full w-full flex overflow-hidden">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80">
+      <div className="h-full w-full flex overflow-y-auto">
+        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
           <SummarySideBar
             editor={editor}
             markings={markings}
diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx
index 188d62427..80ad3507e 100644
--- a/packages/editor/document-editor/src/ui/readonly/index.tsx
+++ b/packages/editor/document-editor/src/ui/readonly/index.tsx
@@ -1,4 +1,4 @@
-import { cn, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
+import { getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
 import { useRouter } from "next/router";
 import { useState, forwardRef, useEffect } from "react";
 import { EditorHeader } from "../components/editor-header";
@@ -91,8 +91,8 @@ const DocumentReadOnlyEditor = ({
         documentDetails={documentDetails}
         archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
       />
-      <div className="h-full w-full flex overflow-hidden">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80">
+      <div className="h-full w-full flex overflow-y-auto">
+        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
           <SummarySideBar
             editor={editor}
             markings={markings}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 5ac4577df..5bcc31991 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -15,7 +15,7 @@ import { PageDetailsHeader } from "components/headers/page-details";
 import { EmptyState } from "components/common";
 // ui
 import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
-import { Loader } from "@plane/ui";
+import { Spinner } from "@plane/ui";
 // assets
 import emptyPage from "public/empty-state/page.svg";
 // helpers
@@ -179,19 +179,22 @@ const PageDetailsPage: NextPageWithLayout = () => {
     handleSubmit(updatePage)().finally(() => setIsSubmitting("submitted"));
   }, 1500);
 
+  if (error)
+    return (
+      <EmptyState
+        image={emptyPage}
+        title="Page does not exist"
+        description="The page you are looking for does not exist or has been deleted."
+        primaryButton={{
+          text: "View other pages",
+          onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
+        }}
+      />
+    );
+
   return (
     <>
-      {error ? (
-        <EmptyState
-          image={emptyPage}
-          title="Page does not exist"
-          description="The page you are looking for does not exist or has been deleted."
-          primaryButton={{
-            text: "View other pages",
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
-          }}
-        />
-      ) : pageDetails ? (
+      {pageDetails ? (
         <div className="flex h-full flex-col justify-between">
           <div className="h-full w-full overflow-hidden">
             {pageDetails.is_locked || pageDetails.archived_at ? (
@@ -267,9 +270,9 @@ const PageDetailsPage: NextPageWithLayout = () => {
           </div>
         </div>
       ) : (
-        <Loader className="p-8">
-          <Loader.Item height="200px" />
-        </Loader>
+        <div className="h-full w-full grid place-items-center">
+          <Spinner />
+        </div>
       )}
     </>
   );