[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>
2026-03-02 18:59:07 +05:30 · 2026-03-02 18:59:07 +05:30 · 779f5e272f
commit 779f5e272f
parent bf52fa22be
22 changed files with 40 additions and 23 deletions
--- 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} />
      ))}
--- 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>
  );
 });
--- 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>
  );
 }
--- 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>
+    </>
  );
 }
--- 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: {
--- 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: {
--- 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: {
--- 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;
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {