diff --git a/app/client/src/components/designSystems/appsmith/TabbedView.tsx b/app/client/src/components/designSystems/appsmith/TabbedView.tsx
index 9fa5f6c3a4..8eaae536d0 100644
--- a/app/client/src/components/designSystems/appsmith/TabbedView.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabbedView.tsx
@@ -9,7 +9,8 @@ const TabsWrapper = styled.div<{ overflow?: boolean }>`
height: 100%;
}
.react-tabs__tab-panel {
- height: 100%;
+ height: calc(100% - 46px);
+ overflow: scroll;
}
.react-tabs__tab-list {
border-bottom-color: #d0d7dd;
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 3219c161fa..a7bf72dd78 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -103,6 +103,10 @@ const FailedMessageContainer = styled.div`
align-items: center;
`;
+const TabbedViewWrapper = styled.div`
+ height: calc(100% - 30px);
+`;
+
const ApiResponseView = (props: Props) => {
const {
match: {
@@ -143,7 +147,7 @@ const ApiResponseView = (props: Props) => {
? JSON.stringify(response.body, null, 2)
: "",
}}
- height={700}
+ height={"100%"}
/>
>
),
@@ -163,12 +167,12 @@ const ApiResponseView = (props: Props) => {
title: "Request Body",
panelComponent: (
),
},
@@ -203,12 +207,14 @@ const ApiResponseView = (props: Props) => {
-
+
+
+
);
};
diff --git a/app/client/src/components/editorComponents/CodeEditor.tsx b/app/client/src/components/editorComponents/CodeEditor.tsx
index df76370def..03c517a6a4 100644
--- a/app/client/src/components/editorComponents/CodeEditor.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor.tsx
@@ -6,9 +6,13 @@ import "codemirror/theme/monokai.css";
require("codemirror/mode/javascript/javascript");
-const Wrapper = styled.div<{ height: number }>`
- height: ${props => props.height}px;
+const Wrapper = styled.div<{ height: number | string }>`
+ height: ${props =>
+ typeof props.height === "number" ? props.height + "px" : props.height};
color: white;
+ .CodeMirror {
+ height: 100%;
+ }
`;
interface Props {
@@ -16,7 +20,7 @@ interface Props {
value: string;
onChange?: (event: ChangeEvent) => void;
};
- height: number;
+ height: number | string;
}
class CodeEditor extends React.Component {
@@ -35,7 +39,6 @@ class CodeEditor extends React.Component {
lineNumbers: true,
lineWrapping: true,
});
- this.editor.setSize(null, this.props.height);
}
}
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index 6a4142dc1d..27f06611d5 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -74,7 +74,7 @@ const DatasourceWrapper = styled.div`
const SecondaryWrapper = styled.div`
display: flex;
- height: 100%;
+ height: calc(100% - 120px);
border-top: 1px solid #d0d7dd;
margin-top: 15px;
`;
diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
index 487c49629a..e4c49ca04e 100644
--- a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
+++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
@@ -29,6 +29,10 @@ const PostbodyContainer = styled.div`
const JSONEditorFieldWrapper = styled.div`
margin: 5px;
+ .CodeMirror {
+ height: auto;
+ min-height: 300px;
+ }
`;
export interface RapidApiAction {
editable: boolean;
@@ -110,7 +114,6 @@ const PostBodyData = (props: Props) => {
= (props: Props) => {
// }
return (
-