From 3eeaf8609739c849d50201d54a64ae579b64b692 Mon Sep 17 00:00:00 2001
From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Date: Tue, 11 May 2021 20:09:33 +0530
Subject: [PATCH] Fix: Resize doesn't react as intended for top/bottom handles.
 (#4321)

---
 .../src/components/editorComponents/DraggableComponent.tsx  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index a5cbe41ed3..8dd54a659e 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -163,7 +163,7 @@ function DraggableComponent(props: DraggableComponentProps) {
 
   // Display this draggable based on the current drag state
   const style: CSSProperties = {
-    display: isCurrentWidgetDragging ? "none" : "flex",
+    display: isCurrentWidgetDragging ? "none" : "block",
   };
 
   // WidgetBoundaries
@@ -172,6 +172,10 @@ function DraggableComponent(props: DraggableComponentProps) {
       style={{
         opacity:
           isResizingOrDragging && selectedWidget !== props.widgetId ? 1 : 0,
+        position: "absolute",
+        transform: `translate(-50%, -50%)`,
+        top: "50%",
+        left: "50%",
       }}
     />
   );