From 855acc4e379b3047f506cb8d40e0dbb8964b21a8 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 15 Jul 2021 21:10:26 +0530
Subject: [PATCH] Fix code editor width issue (#5895)

---
 .../CodeEditor/BindingPrompt.tsx              |  2 +-
 .../editorComponents/CodeEditor/index.tsx     | 21 ++++++++++---------
 .../CodeEditor/styledComponents.ts            | 11 ++++++++++
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx b/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
index e134ce6d24..e4906dfc80 100644
--- a/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/BindingPrompt.tsx
@@ -21,7 +21,7 @@ const Wrapper = styled.span<{
   width: 100%;
   line-height: 13px;
   visibility: ${(props) => (props.visible ? "visible" : "hidden")};
-  z-index: 1;
+  z-index: 3;
 `;
 
 const CurlyBraces = styled.span`
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 99f02e179c..f652e5dae0 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -574,7 +574,17 @@ class CodeEditor extends Component<Props, State> {
                 src={this.props.leftImage}
               />
             )}
-            <div className="CodeEditorTarget" ref={this.codeEditorTarget} />
+            <div className="CodeEditorTarget" ref={this.codeEditorTarget}>
+              <BindingPrompt
+                editorTheme={this.props.theme}
+                isOpen={
+                  showBindingPrompt(showEvaluatedValue, input.value) &&
+                  !_.get(this.editor, "state.completionActive")
+                }
+                promptMessage={this.props.promptMessage}
+                showLightningMenu={this.props.showLightningMenu}
+              />
+            </div>
             {this.props.link && (
               <a
                 className="linkStyles"
@@ -588,15 +598,6 @@ class CodeEditor extends Component<Props, State> {
             {this.props.rightIcon && (
               <IconContainer>{this.props.rightIcon}</IconContainer>
             )}
-            <BindingPrompt
-              editorTheme={this.props.theme}
-              isOpen={
-                showBindingPrompt(showEvaluatedValue, input.value) &&
-                !_.get(this.editor, "state.completionActive")
-              }
-              promptMessage={this.props.promptMessage}
-              showLightningMenu={this.props.showLightningMenu}
-            />
             <ScrollIndicator containerRef={this.editorWrapperRef} />
           </EditorWrapper>
         </EvaluatedValuePopup>
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index 612bed01e4..64d6947c5e 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -232,6 +232,17 @@ export const EditorWrapper = styled.div<{
   }
   .CodeEditorTarget {
     width: 100%;
+    ${(props) =>
+      props.size === EditorSize.COMPACT
+        ? `
+        position: absolute;
+        left: 0;
+        right: 0;
+      `
+        : `
+          position: relative;
+        `}
+    ${(props) => (props.isFocused ? `z-index: 3;` : `z-index: 0;`)}
   }
 `;