[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>

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} />
       ))}

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">
+    <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>
   );
 });

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>
   );
 }

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
+        <Tabs.Content key={tab.key} value={tab.key} className="py-2 flex-1 overflow-hidden">
-          key={tab.key}
-          as="div"
-          className="size-full p-3.5 pt-0 overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
-        >
           {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>
+    </>
   );
 }

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: {

packages/i18n/src/locales/de/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "Favoriten",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Notizen",
   },
   auth: {
     common: {

packages/i18n/src/locales/en/core.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "Favorites",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Stickies",
   },
 
   auth: {

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;

packages/i18n/src/locales/es/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "Favoritos",
     pro: "Pro",
     upgrade: "Mejorar",
+    stickies: "Notas adhesivas",
   },
   auth: {
     common: {

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: {

packages/i18n/src/locales/id/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "Favorit",
     pro: "Pro",
     upgrade: "Upgrade",
+    stickies: "Catatan tempel",
   },
   auth: {
     common: {

packages/i18n/src/locales/it/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "Preferiti",
     pro: "Pro",
     upgrade: "Aggiorna",
+    stickies: "Stickies",
   },
   auth: {
     common: {

packages/i18n/src/locales/ja/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "お気に入り",
     pro: "プロ",
     upgrade: "アップグレード",
+    stickies: "付箋",
   },
   auth: {
     common: {

packages/i18n/src/locales/ko/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "즐겨찾기",
     pro: "프로",
     upgrade: "업그레이드",
+    stickies: "스티키",
   },
   auth: {
     common: {

packages/i18n/src/locales/pl/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "Ulubione",
     pro: "Pro",
     upgrade: "Uaktualnij",
+    stickies: "Notatki",
   },
   auth: {
     common: {

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: {

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: {

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: {

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: {

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: {

packages/i18n/src/locales/zh-CN/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "收藏",
     pro: "专业版",
     upgrade: "升级",
+    stickies: "便签",
   },
   auth: {
     common: {

packages/i18n/src/locales/zh-TW/translations.ts

@@ -23,6 +23,7 @@ export default {
     favorites: "收藏",
     pro: "專業版",
     upgrade: "升級",
+    stickies: "便利貼",
   },
   auth: {
     common: {