From 92464b2dc80ec5a7b5283bcf6745c1972f35d9ff Mon Sep 17 00:00:00 2001
From: Ayush Kaithwas <ayush.91011@gmail.com>
Date: Tue, 6 Jan 2026 18:55:57 +0530
Subject: [PATCH] Dynamic Dashboards: Fix Content outline not being scrollable
 (#115827)

Enhancement: Add ScrollContainer to DashboardOutline for improved scrolling experience
---
 .../dashboard-scene/edit-pane/DashboardOutline.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
index b543b04537c..d368de82c65 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
@@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { SceneObject } from '@grafana/scenes';
-import { Box, Icon, Sidebar, Text, useElementSelection, useStyles2 } from '@grafana/ui';
+import { Box, Icon, ScrollContainer, Sidebar, Text, useElementSelection, useStyles2 } from '@grafana/ui';
 
 import { isRepeatCloneOrChildOf } from '../utils/clone';
 import { DashboardInteractions } from '../utils/interactions';
@@ -24,12 +24,14 @@ export function DashboardOutline({ editPane, isEditing }: Props) {
   const dashboard = getDashboardSceneFor(editPane);
 
   return (
-    <>
+    <Box display="flex" direction="column" flex={1} height="100%">
       <Sidebar.PaneHeader title={t('dashboard.outline.pane-header', 'Content outline')} />
-      <Box padding={1} gap={0} display="flex" direction="column" element="ul" role="tree" position="relative">
-        <DashboardOutlineNode sceneObject={dashboard} isEditing={isEditing} editPane={editPane} depth={0} index={0} />
-      </Box>
-    </>
+      <ScrollContainer showScrollIndicators={true}>
+        <Box padding={1} gap={0} display="flex" direction="column" element="ul" role="tree" position="relative">
+          <DashboardOutlineNode sceneObject={dashboard} isEditing={isEditing} editPane={editPane} depth={0} index={0} />
+        </Box>
+      </ScrollContainer>
+    </Box>
   );
 }