From 8b63b2029e0e36f991b789da96801895376bf766 Mon Sep 17 00:00:00 2001
From: Rishabh Saxena <rishabh.robben@gmail.com>
Date: Thu, 2 Sep 2021 23:56:30 +0530
Subject: [PATCH] fix: bottom padding at the api editor (#7074)

---
 .../editorComponents/ApiResponseView.tsx      | 83 ++++++++++++-------
 .../src/pages/Editor/APIEditor/Form.tsx       |  2 +-
 2 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 3980f9cbb4..bb50fd17ce 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -73,7 +73,7 @@ const ResponseTabWrapper = styled.div`
 `;
 
 const TabbedViewWrapper = styled.div<{ isCentered: boolean }>`
-  height: calc(100% - 30px);
+  height: 100%;
 
   &&& {
     ul.react-tabs__tab-list {
@@ -93,6 +93,12 @@ const TabbedViewWrapper = styled.div<{ isCentered: boolean }>`
     }
   `
       : null}
+
+  & {
+    .react-tabs__tab-panel {
+      height: calc(100% - 32px);
+    }
+  }
 `;
 
 const SectionDivider = styled.div`
@@ -112,7 +118,7 @@ const Flex = styled.div`
 `;
 
 const NoResponseContainer = styled.div`
-  height: 100%;
+  flex: 1;
   width: 100%;
   display: flex;
   align-items: center;
@@ -153,8 +159,8 @@ const InlineButton = styled(Button)`
 `;
 
 const HelpSection = styled.div`
-  margin-bottom: 5px;
-  margin-top: 10px;
+  padding-bottom: 5px;
+  padding-top: 10px;
 `;
 
 interface ReduxStateProps {
@@ -188,6 +194,16 @@ const StatusCodeText = styled(BaseText)<{ code: string }>`
     props.code.startsWith("2") ? props.theme.colors.primaryOld : Colors.RED};
 `;
 
+const ResponseDataContainer = styled.div`
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  & .CodeEditorTarget {
+    overflow: hidden;
+  }
+`;
+
 function ApiResponseView(props: Props) {
   const {
     match: {
@@ -222,13 +238,14 @@ function ApiResponseView(props: Props) {
   const initialIndex = useSelector(getActionTabsInitialIndex);
   const [selectedIndex, setSelectedIndex] = useState(initialIndex);
   const messages = response?.messages;
+
   const tabs = [
     {
       key: "body",
       title: "Response Body",
       panelComponent: (
         <ResponseTabWrapper>
-          {messages && (
+          {Array.isArray(messages) && messages.length > 0 && (
             <HelpSection>
               {messages.map((msg, i) => (
                 <Callout fill key={i} text={msg} variant={Variant.warning} />
@@ -250,33 +267,35 @@ function ApiResponseView(props: Props) {
               variant={Variant.danger}
             />
           )}
-          {_.isEmpty(response.statusCode) ? (
-            <NoResponseContainer>
-              <Icon name="no-response" />
-              <Text type={TextType.P1}>
-                {EMPTY_RESPONSE_FIRST_HALF()}
-                <InlineButton
-                  isLoading={isRunning}
-                  onClick={onRunClick}
-                  size={Size.medium}
-                  tag="button"
-                  text="Run"
-                  type="button"
-                />
-                {EMPTY_RESPONSE_LAST_HALF()}
-              </Text>
-            </NoResponseContainer>
-          ) : (
-            <ReadOnlyEditor
-              folding
-              height={"100%"}
-              input={{
-                value: response.body
-                  ? JSON.stringify(response.body, null, 2)
-                  : "",
-              }}
-            />
-          )}
+          <ResponseDataContainer>
+            {_.isEmpty(response.statusCode) ? (
+              <NoResponseContainer>
+                <Icon name="no-response" />
+                <Text type={TextType.P1}>
+                  {EMPTY_RESPONSE_FIRST_HALF()}
+                  <InlineButton
+                    isLoading={isRunning}
+                    onClick={onRunClick}
+                    size={Size.medium}
+                    tag="button"
+                    text="Run"
+                    type="button"
+                  />
+                  {EMPTY_RESPONSE_LAST_HALF()}
+                </Text>
+              </NoResponseContainer>
+            ) : (
+              <ReadOnlyEditor
+                folding
+                height={"100%"}
+                input={{
+                  value: response.body
+                    ? JSON.stringify(response.body, null, 2)
+                    : "",
+                }}
+              />
+            )}
+          </ResponseDataContainer>
         </ResponseTabWrapper>
       ),
     },
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index cbe3e6d899..8b20e77038 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -190,7 +190,7 @@ const Link = styled.a`
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
-  height: calc(100% - 126px);
+  height: calc(100% - 118px);
   position: relative;
 `;
 interface APIFormProps {