From 779f5e272f4792b2fbdf8ef39bd1dd9ceefc1931 Mon Sep 17 00:00:00 2001
From: Vipin Chaudhary <VipinChaudhary1809@gmail.com>
Date: Mon, 2 Mar 2026 18:59:07 +0530
Subject: [PATCH] [WIKI-887] fix: add scroll in heading layout (#8596)

* fix: add scroll in heading layout

* chore: remove visible scroll  bar

* fix :format

* chore: fix outline scroll

* chore: fix format

* chore: fix translation

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../pages/navigation-pane/tab-panels/assets.tsx   |  2 +-
 .../navigation-pane/tab-panels/info/root.tsx      | 13 +++++++------
 .../pages/navigation-pane/tab-panels/outline.tsx  | 12 ++++++++++--
 .../pages/navigation-pane/tab-panels/root.tsx     | 15 +++++----------
 packages/i18n/src/locales/cs/translations.ts      |  1 +
 packages/i18n/src/locales/de/translations.ts      |  1 +
 packages/i18n/src/locales/en/core.ts              |  1 +
 packages/i18n/src/locales/en/translations.ts      |  4 ----
 packages/i18n/src/locales/es/translations.ts      |  1 +
 packages/i18n/src/locales/fr/translations.ts      |  1 +
 packages/i18n/src/locales/id/translations.ts      |  1 +
 packages/i18n/src/locales/it/translations.ts      |  1 +
 packages/i18n/src/locales/ja/translations.ts      |  1 +
 packages/i18n/src/locales/ko/translations.ts      |  1 +
 packages/i18n/src/locales/pl/translations.ts      |  1 +
 packages/i18n/src/locales/pt-BR/translations.ts   |  1 +
 packages/i18n/src/locales/ro/translations.ts      |  1 +
 packages/i18n/src/locales/sk/translations.ts      |  1 +
 packages/i18n/src/locales/tr-TR/translations.ts   |  1 +
 packages/i18n/src/locales/vi-VN/translations.ts   |  1 +
 packages/i18n/src/locales/zh-CN/translations.ts   |  1 +
 packages/i18n/src/locales/zh-TW/translations.ts   |  1 +
 22 files changed, 40 insertions(+), 23 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 02be60189..74a229689 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
@@ -117,7 +117,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 2aa67586b..7399fe0cb 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
@@ -21,13 +21,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 5ce3f9b18..66dc2f653 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
@@ -4,6 +4,8 @@
  * See the LICENSE file for details.
  */
 
+// 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
@@ -23,12 +25,18 @@ export function PageNavigationPaneOutlineTabPanel(props: Props) {
   } = page;
 
   return (
-    <div className="size-full pt-3 space-y-1">
+    <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 />}
       />
-    </div>
+    </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 3e12d0923..6e93fddeb 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
@@ -4,8 +4,6 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
-import { Tab } from "@headlessui/react";
 // components
 import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
 // plane web imports
@@ -17,6 +15,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;
@@ -27,19 +26,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>
+    </>
   );
 }
diff --git a/packages/i18n/src/locales/cs/translations.ts b/packages/i18n/src/locales/cs/translations.ts
index 70ffb91f3..a906fa002 100644
--- a/packages/i18n/src/locales/cs/translations.ts
+++ b/packages/i18n/src/locales/cs/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Oblíbené",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Poznámky",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/de/translations.ts b/packages/i18n/src/locales/de/translations.ts
index 2293008ff..1ad5443e7 100644
--- a/packages/i18n/src/locales/de/translations.ts
+++ b/packages/i18n/src/locales/de/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favoriten",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Notizen",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/en/core.ts b/packages/i18n/src/locales/en/core.ts
index f12fa734c..0e60e0680 100644
--- a/packages/i18n/src/locales/en/core.ts
+++ b/packages/i18n/src/locales/en/core.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favorites",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Stickies",
   },
 
   auth: {
diff --git a/packages/i18n/src/locales/en/translations.ts b/packages/i18n/src/locales/en/translations.ts
index 5df71b2ea..e0ca6a2fc 100644
--- a/packages/i18n/src/locales/en/translations.ts
+++ b/packages/i18n/src/locales/en/translations.ts
@@ -2750,8 +2750,4 @@ export default {
   enter_number_of_projects: "Enter number of projects",
   pin: "Pin",
   unpin: "Unpin",
-  sidebar: {
-    stickies: "Stickies",
-    your_work: "Your work",
-  },
 } as const;
diff --git a/packages/i18n/src/locales/es/translations.ts b/packages/i18n/src/locales/es/translations.ts
index 61d2b9ad1..6f99e7e8c 100644
--- a/packages/i18n/src/locales/es/translations.ts
+++ b/packages/i18n/src/locales/es/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favoritos",
     pro: "Pro",
     upgrade: "Mejorar",
+    stickies: "Notas adhesivas",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/fr/translations.ts b/packages/i18n/src/locales/fr/translations.ts
index 2409aee21..13e3e8c3f 100644
--- a/packages/i18n/src/locales/fr/translations.ts
+++ b/packages/i18n/src/locales/fr/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favoris",
     pro: "Pro",
     upgrade: "Mettre à niveau",
+    stickies: "Post-it",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/id/translations.ts b/packages/i18n/src/locales/id/translations.ts
index e0e4383f4..cf0bb8315 100644
--- a/packages/i18n/src/locales/id/translations.ts
+++ b/packages/i18n/src/locales/id/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favorit",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Catatan tempel",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/it/translations.ts b/packages/i18n/src/locales/it/translations.ts
index ca11ebab1..6dd88568b 100644
--- a/packages/i18n/src/locales/it/translations.ts
+++ b/packages/i18n/src/locales/it/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Preferiti",
     pro: "Pro",
     upgrade: "Aggiorna",
+    stickies: "Stickies",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/ja/translations.ts b/packages/i18n/src/locales/ja/translations.ts
index 8db2fbba6..ad09097a7 100644
--- a/packages/i18n/src/locales/ja/translations.ts
+++ b/packages/i18n/src/locales/ja/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "お気に入り",
     pro: "プロ",
     upgrade: "アップグレード",
+    stickies: "付箋",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/ko/translations.ts b/packages/i18n/src/locales/ko/translations.ts
index 911a17b69..4222c5dfa 100644
--- a/packages/i18n/src/locales/ko/translations.ts
+++ b/packages/i18n/src/locales/ko/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "즐겨찾기",
     pro: "프로",
     upgrade: "업그레이드",
+    stickies: "스티키",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/pl/translations.ts b/packages/i18n/src/locales/pl/translations.ts
index 008540a66..e48ed136c 100644
--- a/packages/i18n/src/locales/pl/translations.ts
+++ b/packages/i18n/src/locales/pl/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Ulubione",
     pro: "Pro",
     upgrade: "Uaktualnij",
+    stickies: "Notatki",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/pt-BR/translations.ts b/packages/i18n/src/locales/pt-BR/translations.ts
index 10ce2a39b..b3a9840c9 100644
--- a/packages/i18n/src/locales/pt-BR/translations.ts
+++ b/packages/i18n/src/locales/pt-BR/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favoritos",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Anotações",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/ro/translations.ts b/packages/i18n/src/locales/ro/translations.ts
index 4bd68c082..11ddd34bb 100644
--- a/packages/i18n/src/locales/ro/translations.ts
+++ b/packages/i18n/src/locales/ro/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favorite",
     pro: "Pro",
     upgrade: "Treci la versiunea superioară",
+    stickies: "Notițe",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/sk/translations.ts b/packages/i18n/src/locales/sk/translations.ts
index 0700f6a28..1bc757265 100644
--- a/packages/i18n/src/locales/sk/translations.ts
+++ b/packages/i18n/src/locales/sk/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Obľúbené",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Poznámky",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/tr-TR/translations.ts b/packages/i18n/src/locales/tr-TR/translations.ts
index 4089d84b8..23b5aeb69 100644
--- a/packages/i18n/src/locales/tr-TR/translations.ts
+++ b/packages/i18n/src/locales/tr-TR/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Favoriler",
     pro: "Pro",
     upgrade: "Yükselt",
+    stickies: "Yapışkan notlar",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/vi-VN/translations.ts b/packages/i18n/src/locales/vi-VN/translations.ts
index fb48215d2..1802c374b 100644
--- a/packages/i18n/src/locales/vi-VN/translations.ts
+++ b/packages/i18n/src/locales/vi-VN/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "Yêu thích",
     pro: "Phiên bản Pro",
     upgrade: "Nâng cấp",
+    stickies: "Ghi chú",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/zh-CN/translations.ts b/packages/i18n/src/locales/zh-CN/translations.ts
index 22495420e..835076ec2 100644
--- a/packages/i18n/src/locales/zh-CN/translations.ts
+++ b/packages/i18n/src/locales/zh-CN/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "收藏",
     pro: "专业版",
     upgrade: "升级",
+    stickies: "便签",
   },
   auth: {
     common: {
diff --git a/packages/i18n/src/locales/zh-TW/translations.ts b/packages/i18n/src/locales/zh-TW/translations.ts
index 59019aa12..ddff2645d 100644
--- a/packages/i18n/src/locales/zh-TW/translations.ts
+++ b/packages/i18n/src/locales/zh-TW/translations.ts
@@ -23,6 +23,7 @@ export default {
     favorites: "收藏",
     pro: "專業版",
     upgrade: "升級",
+    stickies: "便利貼",
   },
   auth: {
     common: {