From b7cae5fbd040b31dcaed18d04ddc6f9db29697da Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Thu, 4 Dec 2025 08:45:24 +0100
Subject: [PATCH] [release-12.3.1] Dashboard Controls: Display dashboard links
 on the right side of the toolbar (#114817)

Dashboard Controls: Display dashboard links on the right side of the toolbar (#114378)

* have dashboard links on the right side

* Lets try a compromise (#114389)

Try to compromise on white space. Having a lot of links will create unessecary empty space under the time controls, but it is necessary if we want to be able to have the links on the right

---------



(cherry picked from commit 8227ecb499784dd466e168be28fe87b8179719d3)

Co-authored-by: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Co-authored-by: Sergej-Vlasov <sergej.s.vlasov@gmail.com>
---
 .../scene/DashboardControls.tsx               | 21 +++++++++++++----
 .../scene/DashboardLinksControls.tsx          | 23 +++++++++++++++++--
 2 files changed, 38 insertions(+), 6 deletions(-)

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<DashboardContr
             <refreshPicker.Component model={refreshPicker} />
           </div>
         )}
-        {!hideDashboardControls && model.hasDashboardControls() && <DashboardControlsButton dashboard={dashboard} />}
+        {!hideDashboardControls && model.hasDashboardControls() && (
+          <div className={styles.dashboardControlsButton}>
+            <DashboardControlsButton dashboard={dashboard} />
+          </div>
+        )}
+        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
       </div>
       {!hideVariableControls && (
         <>
@@ -178,7 +183,6 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
           <DashboardDataLayerControls dashboard={dashboard} />
         </>
       )}
-      {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
       {editPanel && <PanelEditControls panelEditor={editPanel} />}
       {showDebugger && <SceneDebugger scene={model} key={'scene-debugger'} />}
     </div>
@@ -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 (
-    <>
+    <div className={styles.linksContainer}>
       {links
         .filter((link) => link.placement === undefined)
         .map((link: DashboardLink, index: number) => (
           <DashboardLinkRenderer link={link} dashboardUID={uid} key={`${link.title}-$${index}`} />
         ))}
-    </>
+    </div>
   );
 }
+
+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%',
+    }),
+  };
+}