From c410d1d097cb4a637b825a7d9a06bf38e19aae39 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam <kavin.saratha@gmail.com>
Date: Wed, 17 Jan 2024 12:02:57 +0530
Subject: [PATCH] Fixed showing config handle while overlapping

---
 frontend/src/Editor/DragContainer.css | 4 ++++
 frontend/src/Editor/DragContainer.jsx | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/DragContainer.css b/frontend/src/Editor/DragContainer.css
index 17ef654af3..f90efbdaa5 100644
--- a/frontend/src/Editor/DragContainer.css
+++ b/frontend/src/Editor/DragContainer.css
@@ -14,6 +14,10 @@
     /* z-index: 3001; */
 }
 
+.target.hovered{
+    z-index: 2;
+}
+
 .moveable-control-box>.moveable-control-box:not(.moveable-control-box-d-block, .moveable-dragging, .selected-component){
 	visibility: hidden !important;
 }
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index ff38380477..36906c5c28 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -50,15 +50,16 @@ const MouseCustomAble = {
   props: {},
   events: {},
   mouseEnter(e) {
-    console.log('here--- ', e);
     const controlBoxes = document.getElementsByClassName('moveable-control-box');
     for (const element of controlBoxes) {
       element.classList.remove('moveable-control-box-d-block');
     }
+    e.props.target.classList.add('hovered');
     e.controlBox.classList.add('moveable-control-box-d-block');
   },
   mouseLeave(e) {
     console.log('MouseCustomAble LEAVE', e);
+    e.props.target.classList.remove('hovered');
     e.controlBox.classList.remove('moveable-control-box-d-block');
   },
 };