Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: use overflow: auto instead of scroll in widget explorer (#33342)

Browse Source 
![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>
This commit is contained in:
Pawan Kumar 2024-05-14 11:12:32 +05:30 committed by GitHub
parent dd73e8b91f
commit b0f69502b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
View File

@ -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>
</>

9
app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
View File

@ -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>
);
}