UI Scroll Issue Fix

datahub-web-react/src/app/entityV2/shared/components/styled/search/EmbeddedListSearchResults.tsx

@@ -19,18 +19,31 @@ import { SearchCfg } from '@src/conf';
 
 import { DataHubView, FacetFilterInput, FacetMetadata, SearchResults as SearchResultType } from '@types';
 
-const SearchBody = styled.div`
+const SearchBody = styled.div<{ showFilters?: boolean }>`
     height: 100%;
-    overflow-y: auto;
-    display: flex;
+    overflow: hidden;
     background-color: ${REDESIGN_COLORS.BACKGROUND};
+    display: grid;
+    grid-template-rows: 92% auto;
+    grid-template-columns: ${(p) => (p.showFilters ? '0.2fr auto' : '1fr')};
+    grid-template-areas: ${(p) =>
+        p.showFilters
+            ? `
+                 "filters results"
+                 "footer  footer"
+               `
+            : `
+                 "results"
+                 "footer"
+               `};
 `;
 
 const PaginationInfo = styled(Typography.Text)`
     padding: 0px;
 `;
 
 const FiltersContainer = styled.div`
+    grid-area: filters;
     background-color: ${REDESIGN_COLORS.WHITE};
     display: flex;
     flex-direction: column;
@@ -42,6 +55,7 @@ const FiltersContainer = styled.div`
 `;
 
 const ResultContainer = styled.div`
+    grid-area: results;
     height: auto;
     overflow: auto;
     flex: 1;
@@ -52,6 +66,7 @@ const ResultContainer = styled.div`
 `;
 
 const PaginationInfoContainer = styled.span`
+    grid-area: footer;
     padding: 8px;
     padding-left: 16px;
     border-top: 1px solid;
@@ -198,7 +213,7 @@ export const EmbeddedListSearchResults = ({
 
     return (
         <>
-            <SearchBody>
+            <SearchBody showFilters={!!showFilters}>
                 {!!showFilters && (
                     <FiltersContainer>
                         <SearchFiltersSection
@@ -261,34 +276,34 @@ export const EmbeddedListSearchResults = ({
                         />
                     )}
                 </ResultContainer>
-            </SearchBody>
-            <PaginationInfoContainer>
-                <PaginationInfo>
-                    <b>
-                        {lastResultIndex > 0 ? (page - 1) * pageSize + 1 : 0} - {lastResultIndex}
-                    </b>{' '}
-                    of <b>{totalResults}</b>
-                </PaginationInfo>
-                <StyledPagination
-                    current={page}
-                    pageSize={numResultsPerPage}
-                    total={totalResults}
-                    showLessItems
-                    onChange={onChangePage}
-                    showSizeChanger={totalResults > SearchCfg.RESULTS_PER_PAGE}
-                    onShowSizeChange={(_currNum, newNum) => setNumResultsPerPage(newNum)}
-                    pageSizeOptions={['10', '20', '50', '100']}
-                />
-                {applyView ? (
-                    <MatchingViewsLabel
-                        view={view}
-                        selectedViewUrn={selectedViewUrn}
-                        setSelectedViewUrn={setSelectedViewUrn}
+                <PaginationInfoContainer>
+                    <PaginationInfo>
+                        <b>
+                            {lastResultIndex > 0 ? (page - 1) * pageSize + 1 : 0} - {lastResultIndex}
+                        </b>{' '}
+                        of <b>{totalResults}</b>
+                    </PaginationInfo>
+                    <StyledPagination
+                        current={page}
+                        pageSize={numResultsPerPage}
+                        total={totalResults}
+                        showLessItems
+                        onChange={onChangePage}
+                        showSizeChanger={totalResults > SearchCfg.RESULTS_PER_PAGE}
+                        onShowSizeChange={(_currNum, newNum) => setNumResultsPerPage(newNum)}
+                        pageSizeOptions={['10', '20', '50', '100']}
                     />
-                ) : (
-                    <span />
-                )}
-            </PaginationInfoContainer>
+                    {applyView ? (
+                        <MatchingViewsLabel
+                            view={view}
+                            selectedViewUrn={selectedViewUrn}
+                            setSelectedViewUrn={setSelectedViewUrn}
+                        />
+                    ) : (
+                        <span />
+                    )}
+                </PaginationInfoContainer>
+            </SearchBody>
         </>
     );
 };

datahub-web-react/src/app/entityV2/user/UserAssets.tsx

@@ -7,6 +7,7 @@ import { UnionType } from '@app/search/utils/constants';
 
 const UserAssetsWrapper = styled.div`
     height: 100%;
+    overflow: auto;
 `;
 
 type Props = {

datahub-web-react/src/app/shared/RoutedTabs.tsx

@@ -23,6 +23,7 @@ interface Props extends TabsProps {
 const RoutedTabsStyle = styled.div`
     display: flex;
     flex-direction: column;
+    height: 100%;
     overflow: auto;
 `;