diff --git a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx
index 8701c64118a..35f3dcf7bf0 100644
--- a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx
@@ -1,10 +1,11 @@
+import { css } from '@emotion/css';
import { Global } from '@emotion/react';
import Tree from 'rc-tree';
import React, { Key, useEffect, useMemo, useState } from 'react';
-import { SelectableValue, StandardEditorProps } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
import { config } from '@grafana/runtime';
-import { Button, HorizontalGroup, Icon, useTheme2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, useStyles2, useTheme2 } from '@grafana/ui';
import { ElementState } from 'app/features/canvas/runtime/element';
import { AddLayerButton } from '../../../../core/components/Layers/AddLayerButton';
@@ -29,6 +30,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps
-
-
+
+
{selection.length > 0 && (
@@ -180,3 +182,10 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps
);
};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ addLayerButton: css`
+ margin-left: 18px;
+ min-width: 150px;
+ `,
+});