From e6097d93137330636e03e324efb385849dfa5b1c Mon Sep 17 00:00:00 2001
From: MuhammadUmer44 <muhammadumerakhtar51@gmail.com>
Date: Fri, 1 Nov 2024 10:10:40 +0500
Subject: [PATCH 1/3] fix(filter): filter buttons sticky

---
 .../App/SideBar/FilterSearch/index.tsx        | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/App/SideBar/FilterSearch/index.tsx b/src/components/App/SideBar/FilterSearch/index.tsx
index f7dc72322..b81677080 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) => {
       <Hops hops={hops} setHops={setHops} />
       <LineBar />
       <MaxResults maxResults={maxResults} setMaxResults={setMaxResults} />
-      <LineBar />
       <PopoverFooter>
+        <LineBar />
         <ButtonsWrapper>
           <ClearButton
             color="secondary"
@@ -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`

From 6c3f7514af267150c39a08fb976af18d29de3342 Mon Sep 17 00:00:00 2001
From: MuhammadUmer44 <muhammadumerakhtar51@gmail.com>
Date: Fri, 1 Nov 2024 17:24:57 +0500
Subject: [PATCH 2/3] fix(search-filter): chnage button name

---
 src/components/App/SideBar/FilterSearch/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App/SideBar/FilterSearch/index.tsx b/src/components/App/SideBar/FilterSearch/index.tsx
index b81677080..679d96bb0 100644
--- a/src/components/App/SideBar/FilterSearch/index.tsx
+++ b/src/components/App/SideBar/FilterSearch/index.tsx
@@ -130,7 +130,7 @@ export const FilterSearch = ({ anchorEl, setAnchorEl, onClose }: Props) => {
             Clear
           </ClearButton>
           <ShowResultButton color="secondary" onClick={handleFiltersApply} size="large" variant="contained">
-            Show Results
+            Apply
           </ShowResultButton>
         </ButtonsWrapper>
       </PopoverFooter>

From 27b4da6ffc36e322d294188d9e56f34d0a4870be Mon Sep 17 00:00:00 2001
From: MuhammadUmer44 <muhammadumerakhtar51@gmail.com>
Date: Fri, 1 Nov 2024 17:30:38 +0500
Subject: [PATCH 3/3] fix(test): unit test

---
 src/components/App/SideBar/FilterSearch/__tests__/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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)