From ab5cb7f5218b8cf7c24cbf562de5941d5877dc83 Mon Sep 17 00:00:00 2001
From: Chris Collins <chriscollins3456@gmail.com>
Date: Fri, 2 Dec 2022 13:10:52 -0600
Subject: [PATCH] fix(ui) Fix double scroll in embedded list search sections

---
 .../recommendations/renderer/component/EntityNameList.tsx   | 2 +-
 datahub-web-react/src/app/search/AdvancedSearchFilters.tsx  | 6 ++----
 datahub-web-react/src/app/search/SearchFiltersSection.tsx   | 6 ++++--
 datahub-web-react/src/app/search/SimpleSearchFilters.tsx    | 1 +
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx b/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx
index 6323a8ac74bb51..73819d1f9fcf5d 100644
--- a/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx
+++ b/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx
@@ -13,7 +13,7 @@ const StyledCheckbox = styled(Checkbox)`
 `;
 
 const StyledList = styled(List)`
-    overflow-y: scroll;
+    overflow-y: auto;
     height: 100%;
     margin-top: -1px;
     box-shadow: ${(props) => props.theme.styles['box-shadow']};
diff --git a/datahub-web-react/src/app/search/AdvancedSearchFilters.tsx b/datahub-web-react/src/app/search/AdvancedSearchFilters.tsx
index f4e70e1b9007d4..ab242b49fed69f 100644
--- a/datahub-web-react/src/app/search/AdvancedSearchFilters.tsx
+++ b/datahub-web-react/src/app/search/AdvancedSearchFilters.tsx
@@ -11,11 +11,9 @@ import { FIELDS_THAT_USE_CONTAINS_OPERATOR, UnionType } from './utils/constants'
 import { AdvancedSearchAddFilterSelect } from './AdvancedSearchAddFilterSelect';
 
 export const SearchFilterWrapper = styled.div`
-    min-height: 100%;
+    flex: 1;
+    padding: 6px 12px 10px 12px;
     overflow: auto;
-    margin-top: 6px;
-    margin-left: 12px;
-    margin-right: 12px;
 
     &::-webkit-scrollbar {
         height: 12px;
diff --git a/datahub-web-react/src/app/search/SearchFiltersSection.tsx b/datahub-web-react/src/app/search/SearchFiltersSection.tsx
index a2fca0605b4ec3..cca78ae2ae4923 100644
--- a/datahub-web-react/src/app/search/SearchFiltersSection.tsx
+++ b/datahub-web-react/src/app/search/SearchFiltersSection.tsx
@@ -17,7 +17,8 @@ type Props = {
 };
 
 const FiltersContainer = styled.div`
-    display: block;
+    display: flex;
+    flex-direction: column;
     max-width: 260px;
     min-width: 260px;
     overflow-wrap: break-word;
@@ -45,7 +46,8 @@ const FiltersHeader = styled.div`
 `;
 
 const SearchFilterContainer = styled.div`
-    padding-top: 10px;
+    flex: 1;
+    overflow: auto;
 `;
 
 // This component renders the entire filters section that allows toggling
diff --git a/datahub-web-react/src/app/search/SimpleSearchFilters.tsx b/datahub-web-react/src/app/search/SimpleSearchFilters.tsx
index e6b4da2f455310..654341be7715c5 100644
--- a/datahub-web-react/src/app/search/SimpleSearchFilters.tsx
+++ b/datahub-web-react/src/app/search/SimpleSearchFilters.tsx
@@ -7,6 +7,7 @@ import { SimpleSearchFilter } from './SimpleSearchFilter';
 const TOP_FILTERS = ['degree', 'entity', 'tags', 'glossaryTerms', 'domains', 'owners'];
 
 export const SearchFilterWrapper = styled.div`
+    padding-top: 10px;
     max-height: 100%;
     overflow: auto;