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; + `, +});