diff --git a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx
index 31d3fdd3f..d6b0046d4 100644
--- a/src/components/App/SideBar/FilterSearch/__tests__/index.tsx
+++ b/src/components/App/SideBar/FilterSearch/__tests__/index.tsx
@@ -91,14 +91,14 @@ describe('FilterSearch Component', () => {
expect(type1Pill).toHaveStyle(`color: ${colors.black}`)
})
- it('should apply filters when "Show Results" is clicked', async () => {
+ it('should apply filters when "Apply" is clicked', async () => {
renderComponent()
const type1Pill = screen.getByText('Type1')
fireEvent.click(type1Pill)
- const showResultsButton = screen.getByText('Show Results')
+ const showResultsButton = screen.getByText('Apply')
fireEvent.click(showResultsButton)
diff --git a/src/components/App/SideBar/FilterSearch/index.tsx b/src/components/App/SideBar/FilterSearch/index.tsx
index f7dc72322..679d96bb0 100644
--- a/src/components/App/SideBar/FilterSearch/index.tsx
+++ b/src/components/App/SideBar/FilterSearch/index.tsx
@@ -114,8 +114,8 @@ export const FilterSearch = ({ anchorEl, setAnchorEl, onClose }: Props) => {
-
+
{
Clear
- Show Results
+ Apply
@@ -142,34 +142,41 @@ const SearchFilterPopover = styled(Popper)`
&&.MuiPopper-root {
background: ${colors.BG2};
padding: 16px;
- min-width: 360px;
max-height: calc(100% - 20%);
color: ${colors.white};
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
border-radius: 9px;
max-width: 361px;
overflow-x: hidden;
+ padding-bottom: 0 !important;
overflow-y: auto;
border: 1px solid ${colors.black};
z-index: 100;
+ position: relative;
&::-webkit-scrollbar {
width: 3px;
+ height: auto;
}
&::-webkit-scrollbar-track {
background: ${colors.BG2};
border-radius: 9px;
- margin: 5px;
+ margin-top: 5px;
+ margin-bottom: 68px;
overflow-y: hidden;
}
}
`
const PopoverFooter = styled.div`
- display: flex;
justify-content: space-between;
align-items: center;
- padding-top: 8px;
+ padding: 0px 8px 8px 8px;
+ position: sticky;
+ bottom: 0;
+ background: ${colors.BG2};
+ width: calc(100% + 32px);
+ margin: -16px;
`
const LineBar = styled.div`
@@ -265,7 +272,7 @@ export const SourceNodesStepWrapper = styled.div`
export const ButtonsWrapper = styled(Flex)`
flex-direction: row;
- margin: 0 0 6px 8px;
+ margin: 0 0 6px 3px;
`
export const PopoverBody = styled.div`