From faeac974ca4655d6813c2a401412b7bff5d127f4 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Tue, 18 May 2021 17:48:29 +0530
Subject: [PATCH] - Remove code casuing expensive style recalculation

---
 .../editorComponents/CodeEditor/BindingPrompt.tsx   | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx b/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
index 22471c3910..ab92a81b34 100644
--- a/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
@@ -16,7 +16,8 @@ const Wrapper = styled.span<{
   background-color: ${(props) =>
     props.theme.colors.codeMirror.background.hoverState};
   position: absolute;
-  bottom: ${(props) => -props.bottomOffset}px;
+  bottom: ${(props) => props.bottomOffset}px;
+  transform: translateY(100%);
   width: 100%;
   line-height: 13px;
   visibility: ${(props) => (props.visible ? "visible" : "hidden")};
@@ -37,15 +38,9 @@ function BindingPrompt(props: {
   editorTheme?: EditorTheme;
 }): JSX.Element {
   const promptRef = useRef<HTMLDivElement>(null);
-  let bottomOffset = 30;
   const customMessage = !!props.promptMessage;
-  if (promptRef.current) {
-    const boundingRect = promptRef.current.getBoundingClientRect();
-    bottomOffset = boundingRect.height;
-  }
-  if (customMessage) {
-    bottomOffset = 36;
-  }
+  const bottomOffset = customMessage ? 6 : 0;
+
   return (
     <Wrapper
       bottomOffset={bottomOffset}