From e419cb164a6a9a7468a0b35d620dcf55719c37cd Mon Sep 17 00:00:00 2001
From: Jesse David Peterson <jesdavpet@users.noreply.github.com>
Date: Fri, 11 Jul 2025 14:12:14 -0400
Subject: [PATCH] Fix canvas connection point z-indexing bug (#107223)

fix(canvas): hoist connect points one level higher in DOM to fix z-index
---
 public/app/features/canvas/runtime/root.tsx                      | 1 +
 public/app/features/canvas/runtime/scene.tsx                     | 1 -
 .../panel/canvas/components/connections/ConnectionAnchors.tsx    | 1 -
 3 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/public/app/features/canvas/runtime/root.tsx b/public/app/features/canvas/runtime/root.tsx
index 512a4d78a90..1d2f3f40dd0 100644
--- a/public/app/features/canvas/runtime/root.tsx
+++ b/public/app/features/canvas/runtime/root.tsx
@@ -54,6 +54,7 @@ export class RootElement extends FrameState {
         {this.elements.map((v) => (
           <Fragment key={v.UID}>{v.render()}</Fragment>
         ))}
+        {this.scene.connections.render()}
       </div>
     );
   }
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 7d93f127f58..95bc2f7d54f 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -366,7 +366,6 @@ export class Scene {
 
     const sceneDiv = (
       <>
-        {this.connections.render()}
         {this.root.render()}
         {this.isEditingEnabled && (
           <Portal>
diff --git a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
index ddf67e154f0..38893b4ce3b 100644
--- a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
+++ b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx
@@ -137,7 +137,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     cursor: 'cursor',
     width: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
     height: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
-    zIndex: 100,
   }),
   highlightElement: css({
     backgroundColor: '#00ff00',