[WIKI-887] fix: add scroll in heading layout #8596

Copilot · 2026-01-29T10:31:52Z

The assets tab panel is missing a scrolling container. The original implementation had overflow-y-auto on the Tab.Panel wrapper (see removed line with "overflow-y-auto vertical-scrollbar scrollbar-sm"). After the refactor, while the outline tab got a ScrollArea component and the info tab has an overflow-y-auto wrapper, the assets tab only has static content without any scrolling mechanism.

For consistency with the other tabs and to prevent content from being cut off when the asset list is long, this should either:

Be wrapped in a ScrollArea component like the outline tab, or

Have an outer wrapper div with flex-1 and overflow-y-auto like the info tab

The most consistent approach would be to use ScrollArea like the outline tab.

Suggested change

<div className="mt-5 space-y-4 px-4">

{assetsList?.map((asset) => (

<AssetItem key={asset.id} asset={asset} page={page} />

))}

<div className="flex-1 overflow-y-auto">

<div className="mt-5 space-y-4 px-4">

{assetsList?.map((asset) => (

<AssetItem key={asset.id} asset={asset} page={page} />

))}

</div>

Copilot · 2026-01-29T10:31:52Z

The ScrollArea component has both "overflow-y-auto" and "hide-scrollbar" classes applied. The "hide-scrollbar" class conflicts with the scrollbar functionality. Looking at other usages of ScrollArea in the codebase (e.g., apps/web/core/components/sidebar/sidebar-wrapper.tsx:69-77), the pattern is to use scrollType="hover" and size="sm" without the hide-scrollbar class, allowing the ScrollArea component to manage the scrollbar display internally. Remove the "hide-scrollbar" class from the className prop.

Copilot · 2026-01-29T10:31:53Z

The ScrollArea component already handles scrolling internally, so the "overflow-y-auto" class in the className prop is redundant. The ScrollArea component from @plane/propel/scrollarea manages its own overflow behavior through the orientation and scrollType props. Remove "overflow-y-auto" from the className and let the ScrollArea component handle the scrolling behavior.

coderabbitai · 2026-01-29T10:36:04Z

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, find the ScrollArea component location fd -e ts -e tsx "scroll" | grep -i area | head -20

Repository: makeplane/plane

Length of output: 190

🏁 Script executed:

# Search for ScrollArea component definition in the codebase rg -n "export.*ScrollArea" --type=ts --type=tsx -A 10

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

# Check the actual file content to verify the code state cat -n "apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx" | head -50

Repository: makeplane/plane

Length of output: 1460

🏁 Script executed:

# Search for scrollType prop usage and its documentation rg -n "scrollType" --type=ts --type=tsx -B 2 -A 2 | head -50

Repository: makeplane/plane

Length of output: 86

🏁 Script executed:

# Check `@plane/propel` package structure fd "scrollarea" -type d

Repository: makeplane/plane

Length of output: 229

🏁 Script executed:

# Read ScrollArea implementation cat -n "packages/propel/src/scrollarea/scrollarea.tsx"

Repository: makeplane/plane

Length of output: 4535

🏁 Script executed:

# Check the alternative scroll-area implementation cat -n "packages/ui/src/scroll-area.tsx"

Repository: makeplane/plane

Length of output: 3459

🏁 Script executed:

# Search for hide-scrollbar class usage patterns rg "hide-scrollbar" -n

Repository: makeplane/plane

Length of output: 190

🏁 Script executed:

# Check if scrollType is defined/documented anywhere rg "scrollType" -n -A 5 -B 5

Repository: makeplane/plane

Length of output: 16436

🏁 Script executed:

# Verify hide-scrollbar class definition to confirm it hides scrollbars rg "hide-scrollbar" -B 2 -A 2

Repository: makeplane/plane

Length of output: 545

🏁 Script executed:

# Check if there are any docs or comments explaining the intent cat -n "packages/propel/src/scrollarea/scrollarea.tsx" | grep -A 5 -B 5 "hover"

Repository: makeplane/plane

Length of output: 1675

Remove hide-scrollbar class—it conflicts with scrollType="hover".

The scrollType="hover" prop uses opacity transitions to show the scrollbar on hover (data-[hovering]:opacity-100), but the hide-scrollbar class completely hides it regardless of hover state. These are mutually exclusive. Remove hide-scrollbar from the className to allow the scrollbar to appear on hover as intended. The overflow-y-auto class is appropriate and consistent with other ScrollArea usages in the codebase.

🤖 Prompt for AI Agents

In `@apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx` around lines 28 - 40, The ScrollArea usage currently combines scrollType="hover" with a conflicting CSS utility; remove the hide-scrollbar token from the ScrollArea's className so the hover-based scrollbar opacity (scrollType="hover" / data-[hovering]:opacity-100) can take effect—update the ScrollArea component where it is rendered (the ScrollArea element wrapping PageContentBrowser with props orientation="vertical", size="sm", scrollType="hover", viewportClassName="px-4") to keep overflow-y-auto but drop hide-scrollbar.

-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
       );
     });

-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand All @@
       } = 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>
       );
     }

-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand All / @@ -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;
@@ Expand All @@
       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>
+        </>
       );
     }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIKI-887] fix: add scroll in heading layout #8596

Diff view

Diff view

There are no files selected for viewing

Copilot AI Jan 29, 2026

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

coderabbitai bot Jan 29, 2026

Uh oh!

Uh oh!

[WIKI-887] fix: add scroll in heading layout #8596

Are you sure you want to change the base?

[WIKI-887] fix: add scroll in heading layout #8596

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!