Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-24 04:00:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix outline scroll

Browse Source
This commit is contained in:
Aaryan Khandelwal
2026-01-29 14:54:06 +05:30
committed by VipinDevelops
parent a7a72368de
commit f55690edd3
4 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
View File

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

13
apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
View File

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

24
apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
View File

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

15
apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
View File

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