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 ( -
+ {
{apiId ? (