fix: Add & list tabs padding fixes (appsmithorg#35057)

## Description

Fixed padding for add and list view of tab as per design.


Fixes appsmithorg#34529

## Automation

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

### 🔍 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/10035415378>
> Commit: 03296dd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10035415378&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE, @tag.Sanity`
> Spec:
> <hr>Mon, 22 Jul 2024 07:39:55 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

- **User Interface Enhancements**
- Adjusted padding and layout properties across various components to
improve visual alignment and spacing.
- Simplified component structures by removing unnecessary padding
properties.

- **Bug Fixes**
- Resolved potential issues related to visual inconsistencies caused by
previous padding configurations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx

@@ -63,10 +63,6 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
         />
 
         <GroupedList
-          flexProps={{
-            pr: "spaces-2",
-            px: "spaces-3",
-          }}
           groups={groupedJsOperations.map((op) => ({
             groupTitle: op.title,
             className: op.className,

app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx

@@ -60,6 +60,7 @@ const ListJSObjects = () => {
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"
+      px="spaces-3"
       py="spaces-3"
     >
       {files && files.length > 0 ? (
@@ -80,13 +81,12 @@ const ListJSObjects = () => {
           flexDirection="column"
           gap="spaces-4"
           overflowY="auto"
-          px="spaces-3"
         >
           {localFiles.map(({ group, items }) => {
             return (
               <Flex flexDirection={"column"} key={group}>
                 {group !== "NA" ? (
-                  <Flex px="spaces-3" py="spaces-1">
+                  <Flex py="spaces-1">
                     <Text
                       className="overflow-hidden overflow-ellipsis whitespace-nowrap"
                       kind="body-s"

app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx

@@ -36,10 +36,6 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
           titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title}
         />
         <GroupedList
-          flexProps={{
-            pr: "spaces-2",
-            px: "spaces-3",
-          }}
           groups={groupedActionOperations.map((group) => ({
             groupTitle: group.title,
             className: group.className,

app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx

@@ -47,6 +47,7 @@ const ListQuery = () => {
       flexDirection="column"
       gap="spaces-3"
       overflow="hidden"
+      px="spaces-3"
       py="spaces-3"
     >
       {files.length > 0 ? (
@@ -56,16 +57,11 @@ const ListQuery = () => {
           onSearch={setSearchTerm}
         />
       ) : null}
-      <Flex
-        flexDirection={"column"}
-        gap="spaces-4"
-        overflowY="auto"
-        px="spaces-3"
-      >
+      <Flex flexDirection={"column"} gap="spaces-4" overflowY="auto">
         {localFiles.map(({ group, items }) => {
           return (
             <Flex flexDirection={"column"} key={group}>
-              <Flex px="spaces-3" py="spaces-1">
+              <Flex py="spaces-1">
                 <Text
                   className="overflow-hidden overflow-ellipsis whitespace-nowrap"
                   kind="body-s"

app/client/src/pages/Editor/IDE/EditorPane/components/AddAndSearchbar.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 const AddAndSearchbar = ({ hasAddPermission, onAddClick, onSearch }: Props) => {
   return (
-    <Flex alignItems="center" flexDirection="row" gap="spaces-3" px="spaces-3">
+    <Flex alignItems="center" flexDirection="row" gap="spaces-3">
       <SearchInput onChange={onSearch} size="sm" />
       {hasAddPermission ? (
         <Button

app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx

@@ -32,7 +32,7 @@ const GroupedList = (props: Props) => {
         <Flex flexDirection="column" key={group.groupTitle}>
           {group.groupTitle ? (
             <Text
-              className="px-[var(--ads-v2-spaces-3)] py-[var(--ads-v2-spaces-1)]"
+              className="px-0 py-[var(--ads-v2-spaces-1)]"
               color="var(--ads-v2-color-fg-muted)"
               kind="body-s"
             >

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx

@@ -20,8 +20,6 @@ const SegmentAddHeader = (props: Props) => {
           : "var(--ads-v2-color-gray-50)"
       }
       justifyContent="space-between"
-      pl="spaces-4"
-      pr="spaces-2"
       py="spaces-2"
     >
       <Text color="var(--ads-v2-color-fg)" kind="heading-xs">