Dynamic Dashboards: Fix Content outline not being scrollable (#115827)

Enhancement: Add ScrollContainer to DashboardOutline for improved scrolling experience
This commit is contained in:
Ayush Kaithwas
2026-01-06 14:25:57 +01:00
committed by GitHub
parent 5fe192a893
commit 92464b2dc8
@@ -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>
);
}