fix: page scroll area (#2850)

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>

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}

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="h-full w-full flex overflow-y-auto">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80">
+        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
           <SummarySideBar
             editor={editor}
             markings={markings}

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="h-full w-full flex overflow-y-auto">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80">
+        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
           <SummarySideBar
             editor={editor}
             markings={markings}

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 ? (
+      {pageDetails ? (
-        <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 ? (
         <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">
+        <div className="h-full w-full grid place-items-center">
-          <Loader.Item height="200px" />
+          <Spinner />
-        </Loader>
+        </div>
       )}
     </>
   );