Resizable editor

.gitignore

@@ -3,3 +3,4 @@ dist
 node_modules
 .vscode-test/
 *.vsix
+postCode.code-workspace

webview/components/RequestOptionsWindow/styles.css

@@ -1,5 +1,5 @@
 .request-options-window-wrapper {
   flex: 1;
   padding: 5px 20px 10px 20px;
-  overflow: scroll;
+  overflow: auto;
 }

webview/features/response/ResponseBody/index.tsx

@@ -14,6 +14,7 @@ export const ResponseBody = (props) => {
     <div className="response-window">
       <React.Suspense fallback={<div>loading</div>}>
         <Editor
+          automaticLayout={true}
           className="response-editor"
           value={response.data || ""}
           language={language}

webview/pages/Postcode/styles.css

@@ -7,11 +7,13 @@
 .request-options-wrapper {
   display: flex;
   flex-direction: column;
-  min-height: 50%;
+  height: inherit;
+  resize: vertical;
+  overflow: auto;
 }
 
 .response-wrapper {
   display: flex;
   flex-direction: column;
-  height: 50%;
+  height: inherit;
 }

webview/shared/Editor/index.tsx

@@ -6,8 +6,16 @@ import { useAppDispatch } from "../../redux/hooks";
 import { requestBodyRawFormatUpdated } from "../../features/requestBody/requestBodySlice";
 
 const Editor = (props) => {
-  const { value, language, onChange, readOnly, className, copyButton, format } =
-    props;
+  const {
+    value,
+    language,
+    onChange,
+    readOnly,
+    className,
+    copyButton,
+    format,
+    automaticLayout,
+  } = props;
 
   const divEl = React.useRef<HTMLDivElement>(null);
   const [editor, setEditor] = React.useState(undefined);
@@ -20,6 +28,7 @@ const Editor = (props) => {
         minimap: { enabled: false },
         scrollBeyondLastLine: false,
         theme: "vs-dark",
+        automaticLayout,
         value,
         language,
         readOnly,
@@ -93,6 +102,7 @@ Editor.propTypes = {
   readOnly: propTypes.bool,
   copyButton: propTypes.bool,
   format: propTypes.bool,
+  automaticLayout: propTypes.bool,
 };
 
 export default Editor;