From 3650796d3c3ae77582f46a86fa9a99e40d02713a Mon Sep 17 00:00:00 2001
From: Alex <alex@appsmith.com>
Date: Wed, 6 Nov 2024 10:17:22 +0300
Subject: [PATCH] fix: remove gap between tabs and list (#37242)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Remove a small gap that revealed a slice of action bar.


Fixes #37220

## Automation

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

### :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/11688613194>
> Commit: 87b7ed85bb9e45820839f495471a3a9ba1dffec9
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11688613194&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Tue, 05 Nov 2024 17:13:44 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

- **Style**
- Updated the positioning and padding of the List component for improved
layout.
- Adjusted the styling of the ListContainer for better visual alignment.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/pages/Editor/IDE/EditorTabs/List.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
index 0884b47f778..e73b42762e1 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/List.tsx
@@ -8,6 +8,9 @@ import ListQuery from "../EditorPane/Query/List";
 import ListJSObjects from "../EditorPane/JS/List";
 
 const ListContainer = styled(Flex)`
+  position: absolute;
+  top: 32px;
+  padding-top: 4px;
   & .t--entity-item {
     grid-template-columns: 0 auto 1fr auto auto auto auto auto;
     height: 32px;
@@ -24,7 +27,6 @@ export const List = () => {
   return (
     <ListContainer
       bg="var(--ads-v2-color-bg)"
-      className="absolute top-[36px]" // space for tabs on top and then some padding
       data-testid="t--editorpane-list-view"
       h="calc(100% - 32px)"
       w="100%"