fix: Ghseets scroll bug(#6634)

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiPaneTests/API_All_Verb_spec.js

@@ -144,6 +144,7 @@ describe("API Panel Test Functionality", function() {
     cy.log("Response code check successful");
     cy.ResponseCheck("Josh M Krantz");
     cy.log("Response data check successful");
+    cy.switchToPaginationTab();
     cy.enterUrl(apiname, apiwidget.panigationPrevUrl, testdata.prevUrl);
     cy.clickTest(apiwidget.TestPreUrl);
     cy.validateRequest(

app/client/cypress/support/commands.js

@@ -664,8 +664,8 @@ Cypress.Commands.add(
     }
     cy.get(".string-value").contains(baseurl.concat(path));
     cy.get(".string-value").contains(verb);
-    cy.xpath(apiwidget.Responsetab)
-      .should("be.visible")
+    cy.get("[data-cy=t--tab-body]")
+      .first()
       .click({ force: true });
   },
 );

app/client/src/components/ads/Tabs.tsx

@@ -21,6 +21,7 @@ const TabsWrapper = styled.div<{
 }>`
   border-radius: 0px;
   height: 100%;
+  overflow: hidden;
   .react-tabs {
     height: 100%;
   }
@@ -86,9 +87,10 @@ export const TabCount = styled.div`
   background-color: ${(props) => props.theme.colors.tabs.countBg};
   border-radius: 8px;
   width: 17px;
-  height: 14px;
+  height: 17px;
   font-size: 9px;
   line-height: 14px;
+  margin-left: 2px;
 `;
 
 const TabTitleWrapper = styled.div<{ selected: boolean; vertical: boolean }>`
@@ -97,7 +99,7 @@ const TabTitleWrapper = styled.div<{ selected: boolean; vertical: boolean }>`
 
   padding: ${(props) => props.theme.spaces[3] - 1}px
     ${(props) => (props.vertical ? `${props.theme.spaces[4] - 1}px` : 0)}
-    ${(props) => props.theme.spaces[4]}px
+    ${(props) => props.theme.spaces[4] - 1}px
     ${(props) => (props.vertical ? `${props.theme.spaces[4] - 1}px` : 0)};
 
   &:hover {
@@ -125,8 +127,8 @@ const TabTitleWrapper = styled.div<{ selected: boolean; vertical: boolean }>`
     content: "";
     position: absolute;
     width: ${props.vertical ? `${props.theme.spaces[1] - 2}px` : "100%"};
-    bottom: ${props.vertical ? "0%" : `${props.theme.spaces[0] - 1}px`};
-    top: ${props.vertical ? `${props.theme.spaces[0] - 1}px` : "100%"};
+    bottom: ${props.vertical ? "0%" : `${props.theme.spaces[1] - 2}px`};
+    top: ${props.vertical ? `${props.theme.spaces[0] - 1}px` : "unset"};
     left: ${props.theme.spaces[0]}px;
     height: ${props.vertical ? "100%" : `${props.theme.spaces[1] - 2}px`};
     background-color: ${props.theme.colors.info.main};

app/client/src/components/editorComponents/FormRow.tsx

@@ -2,9 +2,9 @@ import styled from "styled-components";
 
 export default styled.div`
   display: flex;
-  flex: 1;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-start;
   min-height: 50px;
+  flex-shrink: 0;
 `;

app/client/src/pages/Editor/APIEditor/Form.tsx

@@ -85,7 +85,6 @@ const MainConfiguration = styled.div`
   padding: ${(props) => props.theme.spaces[4]}px
     ${(props) => props.theme.spaces[10]}px 0px
     ${(props) => props.theme.spaces[10]}px;
-  height: 124px;
 `;
 
 const ActionButtons = styled.div`

app/client/src/pages/Editor/APIEditor/Pagination.tsx

@@ -64,8 +64,7 @@ const NumberBox = styled.div`
 `;
 
 const PaginationTypeView = styled.div`
-  margin-left: 330px;
-  width: 100%;
+  margin-left: 20px;
   display: flex;
   justify-content: space-between;
 `;
@@ -112,11 +111,7 @@ const GifContainer = styled.div`
 export default function Pagination(props: PaginationProps) {
   return (
     <PaginationSection>
-      <FormRow
-        style={{
-          position: "fixed",
-        }}
-      >
+      <FormRow>
         <RadioFieldGroup
           className="t--apiFormPaginationType"
           name="actionConfiguration.paginationType"

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -130,7 +130,6 @@ const TabbedViewContainer = styled.div`
 
 const SettingsWrapper = styled.div`
   padding: 16px 30px;
-  overflow-y: auto;
   height: 100%;
   ${thinScrollbar};
 `;