Scroll issues for drawer and status. (#2820)

Co-authored-by: phix <peter.hicks@astronomer.io>

Author: phixMe

web/src/components/core/screen-load/MqScreenLoad.tsx

@@ -1,21 +1,20 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
-import { HEADER_HEIGHT } from '../../../helpers/theme'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import React, { ReactElement } from 'react'
 
 interface MqScreenLoadProps {
   children?: ReactElement
   loading: boolean
-  noHeader?: boolean
+  customHeight?: string
 }
 
-export const MqScreenLoad: React.FC<MqScreenLoadProps> = ({ loading, children, noHeader }) => {
+export const MqScreenLoad: React.FC<MqScreenLoadProps> = ({ loading, children, customHeight }) => {
   return loading || !children ? (
     <Box
-      height={noHeader ? 'calc(100vh)' : `calc(100vh - ${HEADER_HEIGHT}px)`}
+      height={customHeight ? customHeight : 'calc(100vh)'}
       display={'flex'}
       justifyContent={'center'}
       alignItems={'center'}

web/src/components/datasets/DatasetDetailPage.tsx

@@ -152,7 +152,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
     <Box px={2}>
       <Box
         position={'sticky'}
-        top={'98px'}
+        top={0}
         bgcolor={theme.palette.background.default}
         pt={2}
         zIndex={theme.zIndex.appBar}

web/src/components/jobs/JobDetailPage.tsx

@@ -112,7 +112,7 @@ const JobDetailPage: FunctionComponent<IProps> = (props) => {
     <Box px={2} display='flex' flexDirection='column' justifyContent='space-between'>
       <Box
         position={'sticky'}
-        top={'98px'}
+        top={0}
         bgcolor={theme.palette.background.default}
         py={2}
         zIndex={theme.zIndex.appBar}

web/src/routes/column-level/ColumnLevel.tsx

@@ -90,10 +90,15 @@ const ColumnLevel: React.FC<ColumnLevelProps> = ({
           open={!!searchParams.get('dataset')}
           onClose={() => setSearchParams({})}
           PaperProps={{
-            sx: { backgroundColor: theme.palette.background.default, backgroundImage: 'none' },
+            sx: {
+              backgroundColor: theme.palette.background.default,
+              backgroundImage: 'none',
+              mt: '98px',
+              height: 'calc(100vh - 98px)',
+            },
           }}
         >
-          <Box sx={{ pt: '98px' }}>
+          <Box>
             <ColumnLevelDrawer />
           </Box>
         </Drawer>

web/src/routes/column-level/ColumnLevelDrawer.tsx

@@ -59,7 +59,7 @@ const ColumnLevelDrawer = ({
     <Box width={`${WIDTH}px`}>
       <Box
         position={'sticky'}
-        top={'98px'}
+        top={0}
         bgcolor={theme.palette.background.default}
         pt={2}
         zIndex={theme.zIndex.appBar}

web/src/routes/datasets/Datasets.tsx

@@ -15,6 +15,7 @@ import {
 } from '@mui/material'
 import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
 import { Dataset } from '../../types/api'
+import { HEADER_HEIGHT } from '../../helpers/theme'
 import { IState } from '../../store/reducers'
 import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
 import { Nullable } from '../../types/util/Nullable'
@@ -58,6 +59,7 @@ interface DispatchProps {
 type DatasetsProps = StateProps & DispatchProps
 
 const PAGE_SIZE = 20
+const DATASET_HEADER_HEIGHT = 62
 
 const Datasets: React.FC<DatasetsProps> = ({
   datasets,
@@ -129,7 +131,10 @@ const Datasets: React.FC<DatasetsProps> = ({
           </MQTooltip>
         </Box>
       </Box>
-      <MqScreenLoad loading={isDatasetsLoading && !isDatasetsInit}>
+      <MqScreenLoad
+        loading={isDatasetsLoading && !isDatasetsInit}
+        customHeight={`calc(100vh - ${HEADER_HEIGHT}px - ${DATASET_HEADER_HEIGHT}px)`}
+      >
         <>
           {datasets.length === 0 ? (
             <Box p={2}>

web/src/routes/jobs/Jobs.tsx

@@ -14,6 +14,7 @@ import {
   createTheme,
 } from '@mui/material'
 import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
+import { HEADER_HEIGHT } from '../../helpers/theme'
 import { IState } from '../../store/reducers'
 import { Job } from '../../types/api'
 import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
@@ -54,6 +55,7 @@ interface DispatchProps {
 type JobsProps = StateProps & DispatchProps
 
 const PAGE_SIZE = 20
+const JOB_HEADER_HEIGHT = 62
 
 const Jobs: React.FC<JobsProps> = ({
   jobs,
@@ -125,7 +127,10 @@ const Jobs: React.FC<JobsProps> = ({
           </MQTooltip>
         </Box>
       </Box>
-      <MqScreenLoad loading={isJobsLoading && !isJobsInit}>
+      <MqScreenLoad
+        loading={isJobsLoading && !isJobsInit}
+        customHeight={`calc(100vh - ${HEADER_HEIGHT}px - ${JOB_HEADER_HEIGHT}px)`}
+      >
         <>
           {jobs.length === 0 ? (
             <Box p={2}>

web/src/routes/table-level/TableLevel.tsx

@@ -109,10 +109,15 @@ const ColumnLevel: React.FC<ColumnLevelProps> = ({
           open={!!searchParams.get('tableLevelNode')}
           onClose={() => setSearchParams({})}
           PaperProps={{
-            sx: { backgroundColor: theme.palette.background.default, backgroundImage: 'none' },
+            sx: {
+              backgroundColor: theme.palette.background.default,
+              backgroundImage: 'none',
+              mt: '98px',
+              height: 'calc(100vh - 98px)',
+            },
           }}
         >
-          <Box sx={{ pt: '98px' }}>
+          <Box>
             <TableLevelDrawer />
           </Box>
         </Drawer>