diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index ff82477fd50..6e5b4705124 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -170,7 +170,12 @@ function DashboardControlsRenderer({ model }: SceneComponentProps
)}
- {!hideDashboardControls && model.hasDashboardControls() && }
+ {!hideDashboardControls && model.hasDashboardControls() && (
+
+
+
+ )}
+ {!hideLinksControls && !editPanel && }
{!hideVariableControls && (
<>
@@ -178,7 +183,6 @@ function DashboardControlsRenderer({ model }: SceneComponentProps
>
)}
- {!hideLinksControls && !editPanel && }
{editPanel && }
{showDebugger && }
@@ -226,17 +230,26 @@ function getStyles(theme: GrafanaTheme2) {
}),
rightControls: css({
display: 'flex',
- justifyContent: 'flex-end',
gap: theme.spacing(1),
- marginBottom: theme.spacing(1),
float: 'right',
alignItems: 'center',
+ flexWrap: 'wrap',
+ maxWidth: '100%',
+ minWidth: 0,
}),
timeControls: css({
display: 'flex',
justifyContent: 'flex-end',
gap: theme.spacing(1),
marginBottom: theme.spacing(1),
+ order: 2,
+ marginLeft: 'auto',
+ flexShrink: 0,
+ alignSelf: 'flex-start',
+ }),
+ dashboardControlsButton: css({
+ order: 2,
+ marginLeft: 'auto',
}),
rightControlsWrap: css({
flexWrap: 'wrap',
diff --git a/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx b/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
index 8053055fe81..11639554e5d 100644
--- a/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
@@ -1,5 +1,9 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
import { sceneGraph } from '@grafana/scenes';
import { DashboardLink } from '@grafana/schema';
+import { useStyles2 } from '@grafana/ui';
import { DashboardLinkRenderer } from './DashboardLinkRenderer';
import { DashboardScene } from './DashboardScene';
@@ -12,18 +16,33 @@ export interface Props {
export function DashboardLinksControls({ links, dashboard }: Props) {
sceneGraph.getTimeRange(dashboard).useState();
const uid = dashboard.state.uid;
+ const styles = useStyles2(getStyles);
if (!links || !uid) {
return null;
}
return (
- <>
+
{links
.filter((link) => link.placement === undefined)
.map((link: DashboardLink, index: number) => (
))}
- >
+
);
}
+
+function getStyles(theme: GrafanaTheme2) {
+ return {
+ linksContainer: css({
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: theme.spacing(1),
+ maxWidth: '100%',
+ minWidth: 0,
+ order: 1,
+ flex: '1 1 0%',
+ }),
+ };
+}