diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
index f897d38246e9..211042452700 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
@@ -1,107 +1,87 @@
-import React, { useCallback, useRef } from "react";
+import React from "react";
 import styled from "styled-components";
-import QueryEditor from "pages/Editor/APIEditor/GraphQL/QueryEditor";
-import VariableEditor from "pages/Editor/APIEditor/GraphQL/VariableEditor";
-import useHorizontalResize from "utils/hooks/useHorizontalResize";
-import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import classNames from "classnames";
-import { tailwindLayers } from "constants/Layers";
-
-const ResizableDiv = styled.div`
-  display: flex;
-  height: 100%;
-  flex-shrink: 0;
-`;
+import {
+  CodeEditorBorder,
+  EditorModes,
+  EditorSize,
+  EditorTheme,
+  TabBehaviour,
+} from "components/editorComponents/CodeEditor/EditorConfig";
+import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
+import { Section, Zone } from "pages/Editor/ActionForm";
+import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
+import FormLabel from "components/editorComponents/FormLabel";
 
 const PostBodyContainer = styled.div`
-  display: flex;
-  height: 100%;
-  overflow: hidden;
   &&&& .CodeMirror {
-    height: 100%;
-    border-top: 1px solid var(--ads-v2-color-border);
-    border-bottom: 1px solid var(--ads-v2-color-border);
-    border-radius: 0;
-    padding: 0;
-  }
-  & .CodeMirror-scroll {
-    margin: 0px;
-    padding: 0px;
-    overflow: auto !important;
+    height: auto;
+    min-height: 250px;
   }
 `;
 
-const ResizerHandler = styled.div<{ resizing: boolean }>`
-  width: 6px;
-  height: 100%;
-  margin-left: 2px;
-  border-right: 1px solid var(--ads-v2-color-border);
-  background: ${(props) =>
-    props.resizing ? "var(--ads-v2-color-border)" : "transparent"};
-  &:hover {
-    background: var(--ads-v2-color-border);
-    border-color: transparent;
+const StyledFormLabel = styled(FormLabel)`
+  && {
+    margin-bottom: var(--ads-v2-spaces-2);
+    padding: 0;
   }
 `;
 
-const DEFAULT_GRAPHQL_VARIABLE_WIDTH = 300;
-
 interface Props {
   actionName: string;
 }
 
+const EXPECTED_VARIABLE = {
+  type: "object",
+  example:
+    '{\n  "name":"{{ inputName.property }}",\n  "preference":"{{ dropdownName.property }}"\n}',
+  autocompleteDataType: AutocompleteDataType.OBJECT,
+};
+
 function PostBodyData(props: Props) {
   const { actionName } = props;
   const theme = EditorTheme.LIGHT;
-  const resizeableRef = useRef<HTMLDivElement>(null);
-  const [variableEditorWidth, setVariableEditorWidth] = React.useState(
-    DEFAULT_GRAPHQL_VARIABLE_WIDTH,
-  );
-  /**
-   * Variable Editor's resizeable handler for the changing of width
-   */
-  const onVariableEditorWidthChange = useCallback((newWidth) => {
-    setVariableEditorWidth(newWidth);
-  }, []);
-
-  const { onMouseDown, onMouseUp, onTouchStart, resizing } =
-    useHorizontalResize(
-      resizeableRef,
-      onVariableEditorWidthChange,
-      undefined,
-      true,
-    );
 
   return (
     <PostBodyContainer>
-      <QueryEditor
-        dataTreePath={`${actionName}.config.body`}
-        height="100%"
-        name="actionConfiguration.body"
-        theme={theme}
-      />
-      <div
-        className={`w-2 h-full -ml-2 group  cursor-ew-resize ${tailwindLayers.resizer}`}
-        onMouseDown={onMouseDown}
-        onTouchEnd={onMouseUp}
-        onTouchStart={onTouchStart}
-      >
-        <ResizerHandler
-          className={classNames({
-            "transform transition": true,
-          })}
-          resizing={resizing}
-        />
-      </div>
-      <ResizableDiv
-        ref={resizeableRef}
-        style={{
-          width: `${variableEditorWidth}px`,
-          paddingRight: "2px",
-        }}
-      >
-        <VariableEditor actionName={actionName} theme={theme} />
-      </ResizableDiv>
+      <Section isFullWidth>
+        <Zone layout="single_column">
+          <div className="t--graphql-query-editor">
+            <StyledFormLabel>Query</StyledFormLabel>
+            <DynamicTextField
+              border={CodeEditorBorder.ALL_SIDE}
+              dataTreePath={`${actionName}.config.body`}
+              evaluatedPopUpLabel={"Query"}
+              mode={EditorModes.GRAPHQL_WITH_BINDING}
+              name="actionConfiguration.body"
+              placeholder={`{{\n\t{name: inputName.property, preference: dropdownName.property}\n}}`}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={theme}
+            />
+          </div>
+        </Zone>
+        <Zone layout="single_column">
+          <div className="t--graphql-variable-editor">
+            <StyledFormLabel>Query variables</StyledFormLabel>
+            <DynamicTextField
+              border={CodeEditorBorder.ALL_SIDE}
+              dataTreePath={`${props.actionName}.config.pluginSpecifiedTemplates[1].value`}
+              evaluatedPopUpLabel={"Query variables"}
+              expected={EXPECTED_VARIABLE}
+              height="100%"
+              mode={EditorModes.JSON_WITH_BINDING}
+              name="actionConfiguration.pluginSpecifiedTemplates[1].value"
+              placeholder={`${EXPECTED_VARIABLE.example}\n\n\\\\Take widget inputs using {{ }}`}
+              showLightningMenu={false}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={theme}
+            />
+          </div>
+        </Zone>
+      </Section>
     </PostBodyContainer>
   );
 }
diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
index 71baf3d547d4..80a1748ad0c7 100644
--- a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
@@ -111,6 +111,7 @@ const Wrapper = styled.div`
   flex-direction: row;
   height: 100%;
   position: relative;
+  overflow: hidden;
 `;
 
 const MainContainer = styled.div`
diff --git a/app/client/src/pages/Editor/APIEditor/Editor.tsx b/app/client/src/pages/Editor/APIEditor/Editor.tsx
index 5ce681b23e05..1e6fab13010d 100644
--- a/app/client/src/pages/Editor/APIEditor/Editor.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Editor.tsx
@@ -229,9 +229,10 @@ class ApiEditor extends React.Component<Props> {
 
 const formStyles: CSSProperties = {
   position: "relative",
-  height: "100%",
   display: "flex",
   flexDirection: "column",
+  flexGrow: "1",
+  overflow: "auto",
 };
 
 // TODO: Fix this the next time the file is edited
diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx
deleted file mode 100644
index 53948e1520b4..000000000000
--- a/app/client/src/pages/Editor/APIEditor/GraphQL/QueryEditor.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import { Field } from "redux-form";
-// // Codemirror GraphQL plugins
-import "codemirror-graphql/hint";
-import "codemirror-graphql/info";
-import "codemirror-graphql/jump";
-import "codemirror-graphql/mode";
-
-import QueryWrapper from "./QueryWrapperWithCSS";
-import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import {
-  CodeEditorBorder,
-  EditorModes,
-  EditorSize,
-  TabBehaviour,
-} from "components/editorComponents/CodeEditor/EditorConfig";
-import styled from "styled-components";
-import { Text, TextType } from "@appsmith/ads-old";
-import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
-
-const QueryHeader = styled(Text)`
-  background: var(--ads-v2-color-bg-subtle);
-  padding: 8px 16px;
-`;
-
-interface QueryProps {
-  // Path to store the value in the actual data object
-  dataTreePath: string;
-  // Height for the editor
-  height: string;
-  // Name of the field of the form
-  name: string;
-  // Theme to be used in CodeEditor
-  theme: EditorTheme;
-}
-
-/**
- * Query Editor is for writing Graphql query using the Codemirror Editor which we use
- * @param props Props that are required by the CodeEditor to render the query editor
- * @returns Component with Editor
- */
-function QueryEditor(props: QueryProps) {
-  const editorProps = {
-    mode: EditorModes.GRAPHQL_WITH_BINDING,
-    tabBehaviour: TabBehaviour.INDENT,
-    size: EditorSize.EXTENDED,
-    showLineNumbers: true,
-  };
-
-  return (
-    <QueryWrapper className="t--graphql-query-editor">
-      <QueryHeader color={"var(--ads-v2-color-fg)"} type={TextType.H6}>
-        Query
-      </QueryHeader>
-      <Field
-        border={CodeEditorBorder.NONE}
-        borderLess
-        component={LazyCodeEditor}
-        evaluatedPopUpLabel="Query"
-        {...props}
-        {...editorProps}
-      />
-    </QueryWrapper>
-  );
-}
-
-export default QueryEditor;
diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx
deleted file mode 100644
index 89a3d3b96d34..000000000000
--- a/app/client/src/pages/Editor/APIEditor/GraphQL/VariableEditor.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import {
-  CodeEditorBorder,
-  EditorModes,
-  EditorSize,
-  TabBehaviour,
-} from "components/editorComponents/CodeEditor/EditorConfig";
-import styled from "styled-components";
-import { Text, TextType } from "@appsmith/ads-old";
-import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
-import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
-
-const VariableWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex-shrink: 0;
-  &&&&& .CodeMirror {
-    border: 0px;
-  }
-  &&& .CodeMirror-gutters {
-    background: var(--ads-v2-color-bg-subtle);
-  }
-`;
-
-const VariableHeader = styled(Text)`
-  background: var(--ads-v2-color-bg-subtle);
-  padding: 8px 16px;
-`;
-
-const EXPECTED_VARIABLE = {
-  type: "object",
-  example:
-    '{\n  "name":"{{ inputName.property }}",\n  "preference":"{{ dropdownName.property }}"\n}',
-  autocompleteDataType: AutocompleteDataType.OBJECT,
-};
-
-interface VariableProps {
-  // Name of the action to define the path to the config property
-  actionName: string;
-  // Theme to be used in CodeEditor
-  theme: EditorTheme;
-}
-
-/**
- * Variable Editor is for writing Graphql variables using the Codemirror Editor which we use for JSON
- * @param props Props that are required by the CodeEditor to render the variable editor
- * @returns Component with Editor
- */
-function VariableEditor(props: VariableProps) {
-  return (
-    <VariableWrapper className="t--graphql-variable-editor">
-      <VariableHeader color={"var(--ads-v2-color-fg)"} type={TextType.H6}>
-        Query variables
-      </VariableHeader>
-      <DynamicTextField
-        border={CodeEditorBorder.NONE}
-        borderLess
-        dataTreePath={`${props.actionName}.config.pluginSpecifiedTemplates[1].value`}
-        evaluatedPopUpLabel={"Query variables"}
-        expected={EXPECTED_VARIABLE}
-        height="100%"
-        mode={EditorModes.JSON_WITH_BINDING}
-        name="actionConfiguration.pluginSpecifiedTemplates[1].value"
-        placeholder={`${EXPECTED_VARIABLE.example}\n\n\\\\Take widget inputs using {{ }}`}
-        showLightningMenu={false}
-        showLineNumbers
-        size={EditorSize.EXTENDED}
-        tabBehaviour={TabBehaviour.INDENT}
-        theme={props.theme}
-      />
-    </VariableWrapper>
-  );
-}
-
-export default VariableEditor;
diff --git a/app/client/src/pages/Editor/ActionForm/Section/index.tsx b/app/client/src/pages/Editor/ActionForm/Section/index.tsx
index 937ad0b631d5..7b664e119607 100644
--- a/app/client/src/pages/Editor/ActionForm/Section/index.tsx
+++ b/app/client/src/pages/Editor/ActionForm/Section/index.tsx
@@ -5,11 +5,13 @@ import styles from "./styles.module.css";
 interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   isStandalone?: boolean;
+  isFullWidth?: boolean;
 }
 
 const Section: React.FC<SectionProps> = ({
   children,
   className,
+  isFullWidth = false,
   isStandalone = false,
   ...props
 }) => {
@@ -18,6 +20,7 @@ const Section: React.FC<SectionProps> = ({
   return (
     <div
       className={classNames}
+      data-fullwidth={isFullWidth.toString()}
       data-standalone={isStandalone.toString()}
       {...props}
     >
diff --git a/app/client/src/pages/Editor/ActionForm/Section/styles.module.css b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
index e3d2a2d2f309..fb03da7ffbd3 100644
--- a/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
+++ b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
@@ -13,4 +13,8 @@
   &[data-standalone="false"]:not(:last-child) {
     border-bottom: 1px solid var(--ads-v2-color-border);
   }
+
+  &[data-fullwidth="true"] {
+    max-width: none;
+  }
 }