fix: Paddings and scrolls in Plugin Action Editor

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx

@@ -4,15 +4,15 @@ import styles from "./styles.module.css";
 
 interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  isStandalone?: boolean;
+  withoutPadding?: boolean;
   isFullWidth?: boolean;
 }
 
 const Section: React.FC<SectionProps> = ({
   children,
   className,
   isFullWidth = false,
-  isStandalone = false,
+  withoutPadding = false,
   ...props
 }) => {
   const classNames = clsx(styles.section, className);
@@ -21,7 +21,7 @@ const Section: React.FC<SectionProps> = ({
     <div
       className={classNames}
       data-fullwidth={isFullWidth.toString()}
-      data-standalone={isStandalone.toString()}
+      data-withoutPadding={withoutPadding.toString()}
       {...props}
     >
       {children}

app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css

@@ -6,11 +6,22 @@
   max-width: 800px;
   justify-content: center;
 
-  &[data-standalone="false"] {
+  &[data-withoutPadding="true"] {
+    padding: 0;
+  }
+
+  /* We do not want padding above the first section */
+  &[data-withoutPadding="false"]:first-child {
+    padding-bottom: var(--ads-v2-spaces-6);
+  }
+
+  /* All other sections expect first will have padding top and bottom */
+  &[data-withoutPadding="false"]:not(:first-child) {
     padding-block: var(--ads-v2-spaces-6);
   }
 
-  &[data-standalone="false"]:not(:last-child) {
+  /* We will also render a border below sections expect for the last section */
+  &[data-withoutPadding="false"]:not(:last-child) {
     border-bottom: 1px solid var(--ads-v2-color-border);
   }
 

app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx

@@ -28,7 +28,6 @@ import { Select, Option } from "@appsmith/ads";
 const PostBodyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 12px 0px 0px;
   background-color: var(--ads-v2-color-bg);
   height: 100%;
   gap: var(--ads-v2-spaces-4);

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx

@@ -29,7 +29,13 @@ const CommonEditorForm = (props: Props) => {
   } = useGetFormActionValues();
 
   return (
-    <Flex flexDirection="column" gap="spaces-3" w="100%">
+    <Flex
+      flex="1"
+      flexDirection="column"
+      gap="spaces-3"
+      overflow="hidden"
+      w="100%"
+    >
       <InfoFields
         actionName={action.name}
         changePermitted={props.isChangePermitted}

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx

@@ -22,13 +22,9 @@ const SettingsWrapper = styled.div`
     padding: 0;
   }
 `;
-const TabsListWrapper = styled.div`
-  padding: 0 var(--ads-v2-spaces-7);
-`;
 const StyledTabPanel = styled(TabPanel)`
   height: calc(100% - 50px);
-  overflow: auto;
-  padding: 0 var(--ads-v2-spaces-7);
+  overflow: scroll;
 `;
 
 export function RequestTabs(props: {
@@ -61,31 +57,37 @@ export function RequestTabs(props: {
   );
 
   return (
-    <Tabs className="h-full" onValueChange={onValueChange} value={value}>
-      <TabsListWrapper>
-        <TabsList>
-          {Object.values(API_EDITOR_TABS)
-            .filter((tab) => {
-              return !(!props.showSettings && tab === API_EDITOR_TABS.SETTINGS);
-            })
-            .map((tab) => (
-              <Tab
-                data-testid={`t--api-editor-${tab}`}
-                key={tab}
-                notificationCount={
-                  tab == "HEADERS"
-                    ? headersCount
-                    : tab == "PARAMS"
-                      ? paramsCount
-                      : undefined
-                }
-                value={tab}
-              >
-                {createMessage(API_EDITOR_TAB_TITLES[tab])}
-              </Tab>
-            ))}
-        </TabsList>
-      </TabsListWrapper>
+    <Tabs
+      onValueChange={onValueChange}
+      style={{
+        height: "calc(100% - 36px)",
+        overflow: "hidden",
+        maxHeight: "unset",
+      }}
+      value={value}
+    >
+      <TabsList>
+        {Object.values(API_EDITOR_TABS)
+          .filter((tab) => {
+            return !(!props.showSettings && tab === API_EDITOR_TABS.SETTINGS);
+          })
+          .map((tab) => (
+            <Tab
+              data-testid={`t--api-editor-${tab}`}
+              key={tab}
+              notificationCount={
+                tab == "HEADERS"
+                  ? headersCount
+                  : tab == "PARAMS"
+                    ? paramsCount
+                    : undefined
+              }
+              value={tab}
+            >
+              {createMessage(API_EDITOR_TAB_TITLES[tab])}
+            </Tab>
+          ))}
+      </TabsList>
       <StyledTabPanel value={API_EDITOR_TABS.HEADERS}>
         <DatasourceConfig
           attributeName="header"

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/DatasourceConfig.tsx

@@ -93,10 +93,7 @@ const FlexContainer = styled.div`
 const KeyValueStackContainer = styled.div`
   padding: 0;
 `;
-const KeyValueFlexContainer = styled.div`
-  padding: ${(props) => props.theme.spaces[4]}px
-    ${(props) => props.theme.spaces[14]}px 0 0;
-`;
+const KeyValueFlexContainer = styled.div``;
 const FormRowWithLabel = styled(FormRow)`
   flex-wrap: wrap;
 

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx

@@ -15,7 +15,7 @@ import FormLabel from "components/editorComponents/FormLabel";
 const PostBodyContainer = styled.div`
   &&&& .CodeMirror {
     height: auto;
-    min-height: 250px;
+    min-height: 150px;
   }
 `;
 
@@ -43,7 +43,7 @@ function PostBodyData(props: Props) {
 
   return (
     <PostBodyContainer>
-      <Section isFullWidth>
+      <Section isFullWidth withoutPadding>
         <Zone layout="single_column">
           <div className="t--graphql-query-editor">
             <StyledFormLabel>Query</StyledFormLabel>

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

@@ -101,6 +101,7 @@ const TabbedViewContainer = styled.div`
   overflow: auto;
   position: relative;
   height: 100%;
+  padding: 0 var(--ads-v2-spaces-7);
 `;
 
 const Wrapper = styled.div`