mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-18 20:30:48 +00:00
fix(ui): Fix drawer body loading overlay scroll behavior (#23706)
- Add overflow: hidden to outer Box to prevent header/footer scroll - Move scrolling to inner content container - Increase overlay zIndex from 1 to 1000 to appear above form fields - Overlay now stays fixed covering entire body viewport during scroll 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Satish <satish@Satishs-MacBook-Pro.local> Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
parent
da7a2778f6
commit
adada34284
@ -20,25 +20,25 @@ import { usePermissionProvider } from '../../../context/PermissionProvider/Permi
|
|||||||
import { ResourceEntity } from '../../../context/PermissionProvider/PermissionProvider.interface';
|
import { ResourceEntity } from '../../../context/PermissionProvider/PermissionProvider.interface';
|
||||||
import { CreateDataProduct } from '../../../generated/api/domains/createDataProduct';
|
import { CreateDataProduct } from '../../../generated/api/domains/createDataProduct';
|
||||||
import {
|
import {
|
||||||
CreateDomain,
|
CreateDomain,
|
||||||
DomainType
|
DomainType,
|
||||||
} from '../../../generated/api/domains/createDomain';
|
} from '../../../generated/api/domains/createDomain';
|
||||||
import { Operation } from '../../../generated/entity/policies/policy';
|
import { Operation } from '../../../generated/entity/policies/policy';
|
||||||
import { EntityReference } from '../../../generated/entity/type';
|
import { EntityReference } from '../../../generated/entity/type';
|
||||||
import {
|
import {
|
||||||
FieldProp,
|
FieldProp,
|
||||||
FieldTypes,
|
FieldTypes,
|
||||||
FormItemLayout
|
FormItemLayout,
|
||||||
} from '../../../interface/FormUtils.interface';
|
} from '../../../interface/FormUtils.interface';
|
||||||
import {
|
import {
|
||||||
domainTypeTooltipDataRender,
|
domainTypeTooltipDataRender,
|
||||||
iconTooltipDataRender
|
iconTooltipDataRender,
|
||||||
} from '../../../utils/DomainUtils';
|
} from '../../../utils/DomainUtils';
|
||||||
import { generateFormFields, getField } from '../../../utils/formUtils';
|
import { generateFormFields, getField } from '../../../utils/formUtils';
|
||||||
import { checkPermission } from '../../../utils/PermissionsUtils';
|
import { checkPermission } from '../../../utils/PermissionsUtils';
|
||||||
import {
|
import {
|
||||||
DEFAULT_DATA_PRODUCT_ICON,
|
DEFAULT_DATA_PRODUCT_ICON,
|
||||||
DEFAULT_DOMAIN_ICON
|
DEFAULT_DOMAIN_ICON,
|
||||||
} from '../../common/IconPicker';
|
} from '../../common/IconPicker';
|
||||||
import '../domain.less';
|
import '../domain.less';
|
||||||
import { DomainFormType } from '../DomainPage.interface';
|
import { DomainFormType } from '../DomainPage.interface';
|
||||||
|
@ -15,13 +15,13 @@ import { Box, useAutocomplete, useTheme } from '@mui/material';
|
|||||||
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import {
|
import {
|
||||||
FC,
|
FC,
|
||||||
memo,
|
memo,
|
||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
useRef,
|
useRef,
|
||||||
useState
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { TreeNode } from '../atoms/asyncTreeSelect/types';
|
import { TreeNode } from '../atoms/asyncTreeSelect/types';
|
||||||
import { useAsyncTreeSelect } from '../atoms/asyncTreeSelect/useAsyncTreeSelect';
|
import { useAsyncTreeSelect } from '../atoms/asyncTreeSelect/useAsyncTreeSelect';
|
||||||
@ -30,9 +30,9 @@ import { TreeDropdown } from './atoms/TreeDropdown';
|
|||||||
import { TreeNodeItem } from './atoms/TreeNodeItem';
|
import { TreeNodeItem } from './atoms/TreeNodeItem';
|
||||||
import { TreeSearchInput } from './atoms/TreeSearchInput';
|
import { TreeSearchInput } from './atoms/TreeSearchInput';
|
||||||
import {
|
import {
|
||||||
useTreeDropdown,
|
useTreeDropdown,
|
||||||
useTreeFocusManagement,
|
useTreeFocusManagement,
|
||||||
useTreeKeyboardNavigation
|
useTreeKeyboardNavigation,
|
||||||
} from './hooks';
|
} from './hooks';
|
||||||
import { MUIAsyncTreeSelectProps } from './MUIAsyncTreeSelect.interface';
|
import { MUIAsyncTreeSelectProps } from './MUIAsyncTreeSelect.interface';
|
||||||
|
|
||||||
|
@ -15,13 +15,13 @@ import { Autocomplete, Box, TextField } from '@mui/material';
|
|||||||
import { debounce, isArray, isEmpty } from 'lodash';
|
import { debounce, isArray, isEmpty } from 'lodash';
|
||||||
import { EntityTags } from 'Models';
|
import { EntityTags } from 'Models';
|
||||||
import {
|
import {
|
||||||
FC,
|
FC,
|
||||||
ReactNode,
|
ReactNode,
|
||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
useRef,
|
useRef,
|
||||||
useState
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { TagSource } from '../../../generated/entity/data/container';
|
import { TagSource } from '../../../generated/entity/data/container';
|
||||||
|
@ -23,12 +23,12 @@ import { SearchIndex } from '../../../enums/search.enum';
|
|||||||
import { EntityReference } from '../../../generated/entity/type';
|
import { EntityReference } from '../../../generated/entity/type';
|
||||||
import { searchData } from '../../../rest/miscAPI';
|
import { searchData } from '../../../rest/miscAPI';
|
||||||
import {
|
import {
|
||||||
formatTeamsResponse,
|
formatTeamsResponse,
|
||||||
formatUsersResponse
|
formatUsersResponse,
|
||||||
} from '../../../utils/APIUtils';
|
} from '../../../utils/APIUtils';
|
||||||
import {
|
import {
|
||||||
getEntityName,
|
getEntityName,
|
||||||
getEntityReferenceFromEntity
|
getEntityReferenceFromEntity,
|
||||||
} from '../../../utils/EntityUtils';
|
} from '../../../utils/EntityUtils';
|
||||||
import { ProfilePicture } from '../atoms/ProfilePicture';
|
import { ProfilePicture } from '../atoms/ProfilePicture';
|
||||||
|
|
||||||
|
@ -60,9 +60,8 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
|
|||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
overflow: 'auto',
|
|
||||||
p: padding,
|
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
...sx,
|
...sx,
|
||||||
}}>
|
}}>
|
||||||
{loading && (
|
{loading && (
|
||||||
@ -78,7 +77,7 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||||
zIndex: 1,
|
zIndex: 1000,
|
||||||
}}>
|
}}>
|
||||||
<CircularProgress />
|
<CircularProgress />
|
||||||
{loadingMessage && (
|
{loadingMessage && (
|
||||||
@ -88,7 +87,14 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
|
|||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
{children}
|
<Box
|
||||||
|
sx={{
|
||||||
|
overflow: 'auto',
|
||||||
|
height: '100%',
|
||||||
|
p: padding,
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
),
|
),
|
||||||
[children, loading, loadingMessage, padding, sx]
|
[children, loading, loadingMessage, padding, sx]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user