fix: adjust spacing for filter/sort/pagination form controls (#37221)

## Description
Adjusted spacing to match design values for filter/sort/pagination form
controls.

Fixes #37198

## Automation

/ok-to-test tags="@tag.IDE"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11699699613>
> Commit: cb18e1e71d992a6f77eee1a133eb4df6fab86da0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11699699613&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Wed, 06 Nov 2024 08:54:32 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Enhanced layout responsiveness for the `Zone`, `Pagination`,
`Sorting`, and `Where Clause` components.
- Improved clarity and usability of pagination feature in the Google
Sheets plugin.

- **Bug Fixes**
	- Corrected a typo in the `WhereClauseControl` component function name.

- **Style**
- Updated CSS for various components to use CSS variables for consistent
spacing.
	- Removed hardcoded widths for improved flexibility in form controls.
- Added border-radius and adjusted padding for the `SecondaryBox`
component.
	- Streamlined rendering logic for form configuration elements.

- **Refactor**
- Minor refactoring of function names and properties for better clarity
and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -51,35 +51,7 @@
       }
     }
   }
-  /* PaginationControl hardcoded width is removed */
-  & :global(.t--form-control-PAGINATION) {
-    & > div {
-      grid-gap: 1rem !important;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
 
-      & > div {
-        width: unset !important;
-        margin-right: 0 !important;
-      }
-    }
-  }
-  /* SortingControl hardcoded width is removed */
-  & :global(.t--form-control-SORTING) {
-    & :global(.sorting-dropdown-container) {
-      width: unset;
-
-      & > div {
-        width: 100%;
-        flex: 1;
-      }
-    }
-  }
-  /* WhereClauseControl hardcoded width is removed */
-  & :global(.t--form-control-WHERE_CLAUSE) {
-    & > div {
-      padding-right: 0 !important;
-    }
-  }
   /* DynamicInputTextControl min height and width removed */
   & :global(.uqi-dynamic-input-text) {
     width: unset !important;

app/client/src/components/formControls/PaginationControl.tsx

@@ -10,7 +10,6 @@ import { PaginationSubComponent } from "components/formControls/utils";
 
 export const StyledFormLabel = styled(FormLabel)`
   margin-top: 5px;
-  /* font-weight: 400; */
   font-size: 12px;
   color: var(--ads-v2-color-fg-muted);
   line-height: 12px;
@@ -19,14 +18,13 @@ export const StyledFormLabel = styled(FormLabel)`
 export const FormControlContainer = styled.div`
   display: flex;
   flex-direction: column;
-  width: 270px;
-  margin-right: 1rem;
 `;
 
 const PaginationContainer = styled.div`
   display: grid;
-  grid-gap: 5px 5px;
-  grid-template-columns: repeat(auto-fill, 270px);
+  column-gap: var(--ads-v2-spaces-4);
+  row-gap: var(--ads-v2-spaces-2);
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 `;
 
 // using query dynamic input text for both so user can dynamically change these values.
@@ -36,9 +34,6 @@ const valueFieldConfig: any = {
   key: "value",
   controlType: "QUERY_DYNAMIC_INPUT_TEXT",
   placeholderText: "value",
-  customStyles: {
-    // width: "280px",
-  },
 };
 
 // TODO: Fix this the next time the file is edited
@@ -91,7 +86,6 @@ export function Pagination(props: {
   );
 
   const defaultStyles = {
-    // width: "280px",
     ...customStyles,
   };
 
@@ -115,7 +109,6 @@ export function Pagination(props: {
         />
         <StyledFormLabel>Limits the number of rows returned.</StyledFormLabel>
       </FormControlContainer>
-
       {/*  form control for Offset field */}
       <FormControlContainer>
         <FormControl

app/client/src/components/formControls/SortingControl.tsx

@@ -54,13 +54,13 @@ const orderFieldConfig: any = {
 
 const SortingContainer = styled.div`
   display: flex;
-  gap: 5px;
+  gap: var(--ads-v2-spaces-4);
   flex-direction: column;
 `;
 
 const SortingDropdownContainer = styled.div`
   display: flex;
-  gap: 5px;
+  gap: var(--ads-v2-spaces-4);
 `;
 
 const SortingFields = styled.div<{ isBreakpointSmall: boolean }>`
@@ -69,7 +69,9 @@ const SortingFields = styled.div<{ isBreakpointSmall: boolean }>`
     isBreakpointSmall ? "1fr" : "1fr 180px"};
   grid-template-rows: ${({ isBreakpointSmall }) =>
     isBreakpointSmall ? "1fr 1fr" : "1fr"};
-  gap: 5px;
+  column-gap: var(--ads-v2-spaces-4);
+  row-gap: var(--ads-v2-spaces-2);
+  width: 100%;
 `;
 
 const ButtonWrapper = styled.div`
@@ -159,9 +161,6 @@ function SortingComponent(props: SortingComponentProps) {
                 <FormControl
                   config={{
                     ...columnFieldConfig,
-                    customStyles: {
-                      width: "100%",
-                    },
                     configProperty: columnPath,
                     nestedFormControl: true,
                   }}

app/client/src/components/formControls/WhereClauseControl.tsx

@@ -90,7 +90,7 @@ const CenteredIconButton = styled(Button)<{
 `;
 
 // We are setting a background color for the last two nested levels
-const handleSecondaryBoxBackgroudColor = (
+const handleSecondaryBoxBackgroundColor = (
   currentNestingLevel: number,
   nestedLevels: number,
 ) => {
@@ -113,11 +113,12 @@ const SecondaryBox = styled.div<{
   display: flex;
   flex-direction: column;
   position: relative;
-  border-radius: var(--ads-v2-border-radius);
   border: solid 1px var(--ads-v2-color-border);
+  border-radius: var(--ads-v2-border-radius);
   border-width: ${(props) => (props?.showBorder ? "1px" : "0px")};
   padding: ${(props) =>
-    props?.showBorder ? "0px 12px 12px 8px" : "4px 12px 12px 0px"};
+    props?.showBorder ? "0px 12px 12px 8px" : "4px 0px 12px 0px"};
+
   width: 100%;
   // Setting a max width to not have it really elongate on very large screens
   max-width: 2000px;
@@ -125,11 +126,10 @@ const SecondaryBox = styled.div<{
   ${(props) =>
     props.size === "small" &&
     `
-    ${handleSecondaryBoxBackgroudColor(
+    ${handleSecondaryBoxBackgroundColor(
       props.currentNestingLevel,
       props.nestedLevels,
     )}
-    padding-bottom: 12px;
   `}
 `;
 
@@ -139,14 +139,13 @@ const ConditionWrapper = styled.div<{ size: string }>`
   flex-direction: row;
   align-items: center;
   width: 100%;
-  gap: 5px;
+  gap: var(--ads-v2-spaces-4);
   margin-top: var(--ads-v2-spaces-3);
   margin-bottom: 5px;
 
   ${(props) =>
     props.size === "small" &&
     `
-    // margin-top: 0px;
     gap: 0px;
     flex-direction: column;
     align-items: start;
@@ -163,8 +162,8 @@ const ConditionBox = styled.div<{ size?: string }>`
   // The 4 elements(3 input fields and a close button) are horizontally aligned
   // by default
   grid-template-columns: auto 100px auto max-content;
-  grid-column-gap: 5px;
-  grid-row-gap: 5px;
+  column-gap: var(--ads-v2-spaces-4);
+  row-gap: var(--ads-v2-spaces-2);
   width: 100%;
 
   ${(props) =>
@@ -178,7 +177,7 @@ const ConditionBox = styled.div<{ size?: string }>`
     // are verticall aligned one below the other.
     grid-template-columns: repeat(2, max-content);
     grid-template-rows: repeat(3, max-content);
-    grid-column-gap: 5px;
+    column-gap: var(--ads-v2-spaces-4);
     // The three input fields will be in the first column
     & :not(:nth-child(4)) {
       grid-column-start: 1;
@@ -196,7 +195,7 @@ const ConditionBox = styled.div<{ size?: string }>`
 const ActionBox = styled.div<{ marginLeft: string; size: string }>`
   display: flex;
   flex-direction: row;
-  gap: 5px;
+  row-gap: var(--ads-v2-spaces-2);
   background-color: inherit;
   margin-left: ${(props) => props.marginLeft};
 
@@ -210,16 +209,15 @@ const ActionBox = styled.div<{ marginLeft: string; size: string }>`
 const GroupConditionBox = styled.div<{ size: string }>`
   display: flex;
   flex-direction: row;
-  gap: 5px;
+  gap: var(--ads-v2-spaces-4);
   width: 100%;
 
   ${(props) =>
     props.size === "small" &&
     `
-  gap: 5px;
-  margin: 5px 0px;
-  flex-direction: row;
-  min-width: max-content;
+    margin: 5px 0px;
+    flex-direction: row;
+    min-width: max-content;
   `}
 `;
 
@@ -308,9 +306,8 @@ function ConditionBlock(props: any) {
   // Smallest width of the component below which the individual input fields don't
   // decrease in width anymore so we decide to shift to small space layout at this point
   const size = useResponsiveBreakpoints(targetRef, [{ small: 505 }]);
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const formValues: any = useSelector((state) =>
+
+  const formValues = useSelector((state) =>
     getFormValues(props.formName)(state),
   );
 
@@ -413,6 +410,7 @@ function ConditionBlock(props: any) {
                   <CenteredIconButton
                     alignSelf={"start"}
                     data-testid={`t--where-clause-delete-[${index}]`}
+                    isIconButton
                     kind="tertiary"
                     onClick={(e: React.MouseEvent) => {
                       e.stopPropagation();

app/client/src/pages/Editor/FormConfig.tsx

@@ -204,10 +204,7 @@ function renderFormConfigTop(props: {
   return (
     <div className="form-config-top" key={props.config.label}>
       {!nestedFormControl && // if the form control is a nested form control hide its label
-        (label?.length > 0 ||
-          encrypted ||
-          tooltipText ||
-          shouldRenderSubtitle) && (
+        (label?.length > 0 || encrypted || shouldRenderSubtitle) && (
           <>
             <FlexWrapper>
               <FormLabel

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/editor/fetch_many.json

@@ -198,6 +198,7 @@
           },
           "children": [
             {
+              "label": "",
               "configProperty": "actionConfiguration.formData.pagination.data",
               "controlType": "PAGINATION",
               "-subtitle": "Object",