From b0f69502b83df425c890a135a239ea0e0bbdca06 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Tue, 14 May 2024 11:12:32 +0530
Subject: [PATCH] chore: use overflow: auto instead of scroll in widget
 explorer (#33342)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![image](https://github.com/appsmithorg/appsmith/assets/6636360/38ddf522-3ebe-4345-99a4-39608961091e)
This PR adds overflow: auto instead of overflow: scroll. because of
overflow:scroll, there is a reserve space at bottom for scrollbar even
when it is not required.

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

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9074032519>
> Commit: f7f68e7a7dcad13403b9b319ebefeb9b901de966
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9074032519&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
---
 app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx    | 2 +-
 .../src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx   | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
index 832692b8bf92..dda055665aea 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
@@ -22,7 +22,7 @@ const AddWidgets = (props: { focusSearchInput?: boolean }) => {
         onCloseClick={closeButtonClickHandler}
         titleMessage={EDITOR_PANE_TEXTS.widgets_create_tab_title}
       />
-      <Flex flexDirection="column" gap="spaces-3" overflowX="scroll">
+      <Flex flexDirection="column" gap="spaces-3" overflowX="auto">
         <UIEntitySidebar focusSearchInput={props.focusSearchInput} isActive />
       </Flex>
     </>
diff --git a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
index c43d9d6720e7..edac5edd3130 100644
--- a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
+++ b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
@@ -9,7 +9,7 @@ import type {
   WidgetTags,
 } from "constants/WidgetConstants";
 import { WIDGET_TAGS } from "constants/WidgetConstants";
-import { SearchInput, Text } from "design-system";
+import { Flex, SearchInput, Text } from "design-system";
 import Fuse from "fuse.js";
 import { debounce } from "lodash";
 import React, { useEffect, useMemo, useRef, useState } from "react";
@@ -109,9 +109,10 @@ function UIEntitySidebar({
           type="text"
         />
       </div>
-      <div
-        className="flex-grow px-3 mt-2 overflow-y-scroll"
+      <Flex
+        className="flex-grow px-3 overflow-y-scroll"
         data-testid="t--widget-sidebar-scrollable-wrapper"
+        pt="spaces-2"
       >
         {isEmpty && (
           <Text
@@ -150,7 +151,7 @@ function UIEntitySidebar({
             );
           })}
         </div>
-      </div>
+      </Flex>
     </div>
   );
 }