From 00ea4024a810b50694b77a4c164b737f536fcb96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 17 Dec 2025 08:36:34 +0100
Subject: [PATCH] ControlsMenu: Fix button spacing (#115468)

---
 .../dashboard-scene/scene/DashboardDataLayerControls.tsx    | 6 ++++--
 .../dashboard-scene/scene/DashboardLinksControls.tsx        | 3 ++-
 .../dashboard-controls-menu/DashboardControlsMenuButton.tsx | 2 ++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardDataLayerControls.tsx b/public/app/features/dashboard-scene/scene/DashboardDataLayerControls.tsx
index 24f7e2dbd79..9a06277da86 100644
--- a/public/app/features/dashboard-scene/scene/DashboardDataLayerControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardDataLayerControls.tsx
@@ -15,13 +15,14 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
   const state = sceneGraph.getData(dashboard).useState();
   // It is possible to render the controls for the annotation data layers in separate places using the `placement` property.
   // In case it's not specified, we are rendering the controls here (default).
-  const isDefaultPlacement = (layer: SceneDataLayerProvider) => layer.state.placement === undefined;
+  const isDefaultPlacementAndNotHidden = (layer: SceneDataLayerProvider) =>
+    layer.state.placement === undefined && !layer.state.isHidden;
   const styles = useStyles2(getStyles);
 
   if (isDashboardDataLayerSetState(state)) {
     return (
       <>
-        {state.annotationLayers.filter(isDefaultPlacement).map((layer) => (
+        {state.annotationLayers.filter(isDefaultPlacementAndNotHidden).map((layer) => (
           <div key={layer.state.key} className={styles.container}>
             <DataLayerControl layer={layer} />
           </div>
@@ -35,6 +36,7 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
 
 const getStyles = (theme: GrafanaTheme2) => ({
   container: css({
+    label: 'dashboard-data-layer-controls',
     display: 'inline-flex',
     alignItems: 'center',
     verticalAlign: 'middle',
diff --git a/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx b/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
index d95c54440c9..6a9ad667217 100644
--- a/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx
@@ -18,7 +18,7 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
   const uid = dashboard.state.uid;
   const styles = useStyles2(getStyles);
 
-  if (!links || !uid) {
+  if (!links || !uid || links.length === 0) {
     return null;
   }
 
@@ -36,6 +36,7 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
 function getStyles(theme: GrafanaTheme2) {
   return {
     linksContainer: css({
+      label: 'dashboard-links-controls',
       display: 'inline-flex',
       gap: theme.spacing(1),
       marginRight: theme.spacing(1),
diff --git a/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx b/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx
index 898eb471373..f3a98f2e9b0 100644
--- a/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx
+++ b/public/app/features/dashboard-scene/scene/dashboard-controls-menu/DashboardControlsMenuButton.tsx
@@ -47,5 +47,7 @@ export function DashboardControlsButton({ dashboard }: { dashboard: DashboardSce
 const getStyles = (theme: GrafanaTheme2) => ({
   dropdownButton: css({
     display: 'inline-flex',
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
   }),
 });