From 67f16f84975cf85332587ad191c41c297f0300bc Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:11:05 +0530
Subject: [PATCH] fix: Add & list tabs padding fixes (#35057)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

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


Fixes #34529

## Automation

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

### :mag: 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: 03296dd5822b1d77342b243e1e606d29a66487f7
> <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  |  4 ----
 app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx |  4 ++--
 .../src/pages/Editor/IDE/EditorPane/Query/Add.tsx      |  4 ----
 .../src/pages/Editor/IDE/EditorPane/Query/List.tsx     | 10 +++-------
 .../IDE/EditorPane/components/AddAndSearchbar.tsx      |  2 +-
 .../Editor/IDE/EditorPane/components/GroupedList.tsx   |  2 +-
 .../IDE/EditorPane/components/SegmentAddHeader.tsx     |  2 --
 7 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
index 2e524f80deaf..b45d056bf75f 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/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,
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
index 465b05c7b5fd..620ac0b373dc 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
+++ b/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"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
index b46513abcc7e..ff95fb1f0982 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
+++ b/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,
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
index f23a0e2e02c4..9321d44d80b2 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
+++ b/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"
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/AddAndSearchbar.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/AddAndSearchbar.tsx
index c42ac8e4dccd..4e1bb222823f 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/AddAndSearchbar.tsx
+++ b/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
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx
index 268bf614b8be..e3c634d7fb84 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx
+++ b/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"
             >
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
index b07ba8870e3f..d198110c534c 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
+++ b/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">