fix(ui) Fix double scroll in embedded list search sections

datahub-project · Dec 2, 2022 · ab5cb7f · ab5cb7f
1 parent 4f7b5ac
commit ab5cb7f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;