Fix code editor width issue (#5895)

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`

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>

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;`)}
   }
 `;