From 2c977bb77ddc028c774b7bcac592171c4c5ec1fb Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 10 Jun 2025 11:36:07 +0100
Subject: [PATCH] Dashboards: Add hover effect to outline splitter drag handle
 (#106443)

---
 .../edit-pane/DashboardEditPaneRenderer.tsx           | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx
index 55536d98ccc..aef1c302402 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneRenderer.tsx
@@ -108,7 +108,7 @@ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleColla
           className={cx(splitter.splitterProps.className, styles.splitter)}
           data-edit-pane-splitter={true}
         />
-        <div {...splitter.secondaryProps} className={cx(splitter.primaryProps.className, styles.paneContent)}>
+        <div {...splitter.secondaryProps} className={cx(splitter.secondaryProps.className, styles.paneContent)}>
           <button
             type="button"
             onClick={() => setOutlineCollapsed(!outlineCollapsed)}
@@ -175,8 +175,13 @@ function getStyles(theme: GrafanaTheme2) {
       padding: theme.spacing(2, 1, 2, 0),
     }),
     splitter: css({
-      '&:after': {
-        display: 'none',
+      '&::after': {
+        background: 'transparent',
+        transform: 'unset',
+        width: '100%',
+        height: '1px',
+        top: '100%',
+        left: '0',
       },
     }),
     outlineCollapseButton: css({