use overflow: auto instead of scroll

appsmithorg · May 10, 2024 · 004c3ca · 004c3ca
1 parent 1c03ef0
commit 004c3ca
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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>
   );
 }