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] 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 1b1b09df81..d4ab6ef5c8 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 fda6b8aef3..e722ff6422 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 0e68acf70d..40c474aa58 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 aba1a04444..d032a57b2a 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>
+    </>
   );
 }