From bb1133d6d9a815fa3eabd49c0baddc95670e4d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 22 Mar 2024 12:05:25 +0100
Subject: [PATCH] DashboardScene: Fixes navbar action buttons collapse to menu
 (#84928)

* DashboardScene: Fixes navbar action buttons collapse to menu

* Update

* Change zindex
---
 .../dashboard-scene/scene/DashboardControls.tsx |  2 +-
 .../dashboard-scene/scene/NavToolbarActions.tsx | 17 +++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index 64cf71583b9..693e6b9ba46 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -77,7 +77,7 @@ function getStyles(theme: GrafanaTheme2) {
       position: 'sticky',
       top: 0,
       background: theme.colors.background.canvas,
-      zIndex: theme.zIndex.navbarFixed,
+      zIndex: theme.zIndex.activePanel,
       width: '100%',
       marginLeft: 'auto',
       [theme.breakpoints.down('sm')]: {
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
index cb8fd8850e0..7950a1f1042 100644
--- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
@@ -27,15 +27,7 @@ interface Props {
 }
 
 export const NavToolbarActions = React.memo<Props>(({ dashboard }) => {
-  const actions = (
-    <DashNavModalContextProvider>
-      <ToolbarButtonRow alignment="right">
-        <ToolbarActions dashboard={dashboard} />
-      </ToolbarButtonRow>
-      <DashNavModalRoot />
-    </DashNavModalContextProvider>
-  );
-
+  const actions = <ToolbarActions dashboard={dashboard} />;
   return <AppChromeUpdate actions={actions} />;
 });
 
@@ -518,7 +510,12 @@ export function ToolbarActions({ dashboard }: Props) {
     lastGroup = action.group;
   }
 
-  return actionElements;
+  return (
+    <DashNavModalContextProvider>
+      <ToolbarButtonRow alignment="right">{actionElements}</ToolbarButtonRow>
+      <DashNavModalRoot />
+    </DashNavModalContextProvider>
+  );
 }
 
 function addDynamicActions(