diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index f21a9ea01aa..6981995bd3a 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -171,7 +171,6 @@ function DashboardControlsRenderer({ model }: SceneComponentProps
)}
- {!hideLinksControls && !editPanel && }
{!hideVariableControls && (
<>
@@ -179,6 +178,7 @@ function DashboardControlsRenderer({ model }: SceneComponentProps
>
)}
+ {!hideLinksControls && !editPanel && }
{!hideDashboardControls && hasDashboardControls && }
{editPanel && }
{showDebugger && }
diff --git a/public/app/features/dashboard-scene/scene/DashboardLinkRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardLinkRenderer.tsx
index e7bc346642b..d2571314782 100644
--- a/public/app/features/dashboard-scene/scene/DashboardLinkRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardLinkRenderer.tsx
@@ -64,7 +64,6 @@ function getStyles(theme: GrafanaTheme2) {
alignItems: 'center',
verticalAlign: 'middle',
marginBottom: theme.spacing(1),
- marginRight: theme.spacing(1),
}),
};
}
diff --git a/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx b/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
index 11639554e5d..46fcf64d121 100644
--- a/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
@@ -36,13 +36,9 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
function getStyles(theme: GrafanaTheme2) {
return {
linksContainer: css({
- display: 'flex',
- flexWrap: 'wrap',
+ display: 'inline-flex',
gap: theme.spacing(1),
- maxWidth: '100%',
- minWidth: 0,
- order: 1,
- flex: '1 1 0%',
+ marginRight: theme.spacing(1),
}),
};
}
diff --git a/public/app/features/dashboard-scene/scene/VariableControls.tsx b/public/app/features/dashboard-scene/scene/VariableControls.tsx
index 1061938e5e6..03d23712c7b 100644
--- a/public/app/features/dashboard-scene/scene/VariableControls.tsx
+++ b/public/app/features/dashboard-scene/scene/VariableControls.tsx
@@ -19,7 +19,6 @@ import { AddVariableButton } from './VariableControlsAddButton';
export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
const { variables } = sceneGraph.getVariables(dashboard)!.useState();
- const styles = useStyles2(getStyles);
return (
<>
@@ -28,11 +27,7 @@ export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
.map((variable) => (
))}
- {config.featureToggles.dashboardNewLayouts ? (
-
- ) : null}
+ {config.featureToggles.dashboardNewLayouts ? : null}
>
);
}
@@ -211,11 +206,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: 'flex',
alignItems: 'center',
}),
- addButton: css({
- display: 'inline-flex',
- alignItems: 'center',
- verticalAlign: 'middle',
- marginBottom: theme.spacing(1),
- marginRight: theme.spacing(1),
- }),
});
diff --git a/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx b/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx
index 8bdabd397d1..75d48144146 100644
--- a/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx
+++ b/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx
@@ -1,7 +1,9 @@
+import { css } from '@emotion/css';
import { PointerEventHandler, useCallback } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
import { Trans } from '@grafana/i18n';
-import { Button } from '@grafana/ui';
+import { Button, useStyles2 } from '@grafana/ui';
import { openAddVariablePane } from '../settings/variables/VariableAddEditableElement';
import { DashboardInteractions } from '../utils/interactions';
@@ -9,6 +11,7 @@ import { DashboardInteractions } from '../utils/interactions';
import { DashboardScene } from './DashboardScene';
export function AddVariableButton({ dashboard }: { dashboard: DashboardScene }) {
+ const styles = useStyles2(getStyles);
const { editview, editPanel, isEditing, viewPanel } = dashboard.useState();
const handlePointerDown: PointerEventHandler = useCallback(
@@ -30,10 +33,22 @@ export function AddVariableButton({ dashboard }: { dashboard: DashboardScene })
}
return (
-
-
+
);
}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ addButton: css({
+ display: 'inline-flex',
+ alignItems: 'center',
+ verticalAlign: 'middle',
+ marginBottom: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ }),
+});
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
index 43d1dda185f..ae5cffb9b31 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
@@ -182,7 +182,6 @@ function getStyles(theme: GrafanaTheme2) {
alignItems: 'center',
verticalAlign: 'middle',
marginBottom: theme.spacing(1),
- marginRight: theme.spacing(1),
}),
};
}