From 521cc11994369c21feb265203bfeda3d3f9d5583 Mon Sep 17 00:00:00 2001
From: Kristina Demeshchik <kristina.demeshchik@gmail.com>
Date: Tue, 23 Dec 2025 05:41:49 -0500
Subject: [PATCH] Dashboard Outline: Differentiate hover styles between edit
 and view modes (#115646)

---
 .../dashboard-scene/edit-pane/DashboardOutline.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
index 10bb180a4b1..b543b04537c 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
@@ -94,7 +94,11 @@ function DashboardOutlineNode({ sceneObject, editPane, isEditing, depth, index }
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       style={{ '--depth': depth } as React.CSSProperties}
     >
-      <div className={cx(styles.row, { [styles.rowSelected]: isSelected })}>
+      <div
+        className={cx(styles.row, isEditing ? styles.rowEditMode : styles.rowViewMode, {
+          [styles.rowSelected]: isSelected,
+        })}
+      >
         <div className={styles.indentation}></div>
         {isContainer && (
           <button
@@ -191,13 +195,19 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       gap: theme.spacing(0.5),
       borderRadius: theme.shape.radius.default,
-
+    }),
+    rowEditMode: css({
       '&:hover': {
         color: theme.colors.text.primary,
         outline: `1px dashed ${theme.colors.border.strong}`,
         backgroundColor: theme.colors.emphasize(theme.colors.background.primary, 0.05),
       },
     }),
+    rowViewMode: css({
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    }),
     rowSelected: css({
       color: theme.colors.text.primary,
       outline: `1px dashed ${theme.colors.primary.border} !important`,