From 2cda36f065971c246e4c1dd163b388b0ddbe2d00 Mon Sep 17 00:00:00 2001
From: VipinDevelops <vipinchaudhary1809@gmail.com>
Date: Wed, 28 Jan 2026 14:40:33 +0530
Subject: [PATCH 1/4] fix: add scroll in heading layout

---
 .../pages/navigation-pane/tab-panels/outline.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index adae3ab5dfe..de09576a7ab 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -17,12 +17,14 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   } = page;
 
   return (
-    <div className="size-full pt-3 space-y-1">
-      <PageContentBrowser
-        className="mt-0"
-        editorRef={editorRef}
-        emptyState={<PageNavigationPaneOutlineTabEmptyState />}
-      />
+    <div className="size-full overflow-y-auto vertical-scrollbar scrollbar-sm">
+        <div className="mt-3">
+          <PageContentBrowser
+            className="mt-0"
+            editorRef={editorRef}
+            emptyState={<PageNavigationPaneOutlineTabEmptyState />}
+          />
+        </div>
     </div>
   );
 }

From d0f154fe7b7dc26cde212f60ff833d4d324cbd1a Mon Sep 17 00:00:00 2001
From: VipinDevelops <vipinchaudhary1809@gmail.com>
Date: Thu, 29 Jan 2026 14:34:43 +0530
Subject: [PATCH 2/4] chore: remove visible scroll  bar

---
 .../components/pages/navigation-pane/tab-panels/outline.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index de09576a7ab..9155fea315b 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -15,9 +15,9 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   const {
     editor: { editorRef },
   } = page;
-
+    
   return (
-    <div className="size-full overflow-y-auto vertical-scrollbar scrollbar-sm">
+    <div className="size-full overflow-y-auto hide-scrollbar">
         <div className="mt-3">
           <PageContentBrowser
             className="mt-0"

From a7a72368debbf670a5dc9d63046ddaea711e3187 Mon Sep 17 00:00:00 2001
From: VipinDevelops <vipinchaudhary1809@gmail.com>
Date: Thu, 29 Jan 2026 14:40:35 +0530
Subject: [PATCH 3/4] fix :format

---
 .../pages/navigation-pane/tab-panels/outline.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index 9155fea315b..0e68acf70d5 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -15,16 +15,16 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   const {
     editor: { editorRef },
   } = page;
-    
+
   return (
     <div className="size-full overflow-y-auto hide-scrollbar">
-        <div className="mt-3">
-          <PageContentBrowser
-            className="mt-0"
-            editorRef={editorRef}
-            emptyState={<PageNavigationPaneOutlineTabEmptyState />}
-          />
-        </div>
+      <div className="mt-3">
+        <PageContentBrowser
+          className="mt-0"
+          editorRef={editorRef}
+          emptyState={<PageNavigationPaneOutlineTabEmptyState />}
+        />
+      </div>
     </div>
   );
 }

From f55690edd3d6ba117f2b2cd6d4f2b52a8253ec4b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 29 Jan 2026 14:54:06 +0530
Subject: [PATCH 4/4] chore: fix outline scroll

---
 .../navigation-pane/tab-panels/assets.tsx     |  2 +-
 .../navigation-pane/tab-panels/info/root.tsx  | 13 +++++-----
 .../navigation-pane/tab-panels/outline.tsx    | 24 ++++++++++++-------
 .../pages/navigation-pane/tab-panels/root.tsx | 15 ++++--------
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
index 1b1b09df81a..d4ab6ef5c85 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
@@ -111,7 +111,7 @@ export const PageNavigationPaneAssetsTabPanel = observer(function PageNavigation
   if (assetsList.length === 0) return <PageNavigationPaneAssetsTabEmptyState />;
 
   return (
-    <div className="mt-5 space-y-4">
+    <div className="mt-5 space-y-4 px-4">
       {assetsList?.map((asset) => (
         <AssetItem key={asset.id} asset={asset} page={page} />
       ))}
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
index fda6b8aef30..e722ff64229 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
@@ -15,13 +15,14 @@ type Props = {
 
 export const PageNavigationPaneInfoTabPanel = observer(function PageNavigationPaneInfoTabPanel(props: Props) {
   const { page, versionHistory } = props;
-
   return (
-    <div className="mt-5">
-      <PageNavigationPaneInfoTabDocumentInfo page={page} />
-      <PageNavigationPaneInfoTabActorsInfo page={page} />
-      <div className="flex-shrink-0 h-px bg-layer-1 my-3" />
-      <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
+    <div className="flex flex-col h-full px-4">
+      <div className="flex-1 overflow-y-auto mt-5">
+        <PageNavigationPaneInfoTabDocumentInfo page={page} />
+        <PageNavigationPaneInfoTabActorsInfo page={page} />
+        <div className="flex-shrink-0 h-px bg-layer-1 my-3" />
+        <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
+      </div>
     </div>
   );
 });
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
index 0e68acf70d5..40c474aa584 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -1,3 +1,5 @@
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
 // plane web imports
 import { PageNavigationPaneOutlineTabEmptyState } from "@/plane-web/components/pages/navigation-pane/tab-panels/empty-states/outline";
 // store
@@ -17,14 +19,18 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   } = page;
 
   return (
-    <div className="size-full overflow-y-auto hide-scrollbar">
-      <div className="mt-3">
-        <PageContentBrowser
-          className="mt-0"
-          editorRef={editorRef}
-          emptyState={<PageNavigationPaneOutlineTabEmptyState />}
-        />
-      </div>
-    </div>
+    <ScrollArea
+      orientation="vertical"
+      size="sm"
+      scrollType="hover"
+      className="size-full overflow-y-auto hide-scrollbar"
+      viewportClassName="px-4"
+    >
+      <PageContentBrowser
+        className="mt-0"
+        editorRef={editorRef}
+        emptyState={<PageNavigationPaneOutlineTabEmptyState />}
+      />
+    </ScrollArea>
   );
 }
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
index aba1a044443..d032a57b2a6 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-import { Tab } from "@headlessui/react";
 // components
 import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
 // plane web imports
@@ -11,6 +9,7 @@ import type { TPageInstance } from "@/store/pages/base-page";
 import { PageNavigationPaneAssetsTabPanel } from "./assets";
 import { PageNavigationPaneInfoTabPanel } from "./info/root";
 import { PageNavigationPaneOutlineTabPanel } from "./outline";
+import { Tabs } from "@plane/propel/tabs";
 
 type Props = {
   page: TPageInstance;
@@ -21,19 +20,15 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
   const { page, versionHistory } = props;
 
   return (
-    <Tab.Panels as={React.Fragment}>
+    <>
       {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-        <Tab.Panel
-          key={tab.key}
-          as="div"
-          className="size-full p-3.5 pt-0 overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
-        >
+        <Tabs.Content key={tab.key} value={tab.key} className="py-2 flex-1 overflow-hidden">
           {tab.key === "outline" && <PageNavigationPaneOutlineTabPanel page={page} />}
           {tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}
           {tab.key === "assets" && <PageNavigationPaneAssetsTabPanel page={page} />}
           <PageNavigationPaneAdditionalTabPanelsRoot activeTab={tab.key} page={page} />
-        </Tab.Panel>
+        </Tabs.Content>
       ))}
-    </Tab.Panels>
+    </>
   );
 }