From adada342847db7e61d9d78a02dfcf277d9c51dbf Mon Sep 17 00:00:00 2001 From: satish Date: Mon, 6 Oct 2025 09:02:41 +0530 Subject: [PATCH] fix(ui): Fix drawer body loading overlay scroll behavior (#23706) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 Co-authored-by: Claude --- .../AddDomainForm/AddDomainForm.component.tsx | 18 ++++++++--------- .../MUIAsyncTreeSelect/MUIAsyncTreeSelect.tsx | 20 +++++++++---------- .../MUITagSuggestion/MUITagSuggestion.tsx | 14 ++++++------- .../MUIUserTeamSelect/MUIUserTeamSelect.tsx | 8 ++++---- .../common/atoms/drawer/useDrawerBody.tsx | 14 +++++++++---- 5 files changed, 40 insertions(+), 34 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx index 7eb2e4d6e68..ffcafd1b0a3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx @@ -20,25 +20,25 @@ import { usePermissionProvider } from '../../../context/PermissionProvider/Permi import { ResourceEntity } from '../../../context/PermissionProvider/PermissionProvider.interface'; import { CreateDataProduct } from '../../../generated/api/domains/createDataProduct'; import { - CreateDomain, - DomainType + CreateDomain, + DomainType, } from '../../../generated/api/domains/createDomain'; import { Operation } from '../../../generated/entity/policies/policy'; import { EntityReference } from '../../../generated/entity/type'; import { - FieldProp, - FieldTypes, - FormItemLayout + FieldProp, + FieldTypes, + FormItemLayout, } from '../../../interface/FormUtils.interface'; import { - domainTypeTooltipDataRender, - iconTooltipDataRender + domainTypeTooltipDataRender, + iconTooltipDataRender, } from '../../../utils/DomainUtils'; import { generateFormFields, getField } from '../../../utils/formUtils'; import { checkPermission } from '../../../utils/PermissionsUtils'; import { - DEFAULT_DATA_PRODUCT_ICON, - DEFAULT_DOMAIN_ICON + DEFAULT_DATA_PRODUCT_ICON, + DEFAULT_DOMAIN_ICON, } from '../../common/IconPicker'; import '../domain.less'; import { DomainFormType } from '../DomainPage.interface'; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/MUIAsyncTreeSelect/MUIAsyncTreeSelect.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/MUIAsyncTreeSelect/MUIAsyncTreeSelect.tsx index d0fb0f54d86..907ea582e63 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/MUIAsyncTreeSelect/MUIAsyncTreeSelect.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/MUIAsyncTreeSelect/MUIAsyncTreeSelect.tsx @@ -15,13 +15,13 @@ import { Box, useAutocomplete, useTheme } from '@mui/material'; import { useTreeViewApiRef } from '@mui/x-tree-view/hooks'; import { debounce } from 'lodash'; import { - FC, - memo, - useCallback, - useEffect, - useMemo, - useRef, - useState + FC, + memo, + useCallback, + useEffect, + useMemo, + useRef, + useState, } from 'react'; import { TreeNode } from '../atoms/asyncTreeSelect/types'; import { useAsyncTreeSelect } from '../atoms/asyncTreeSelect/useAsyncTreeSelect'; @@ -30,9 +30,9 @@ import { TreeDropdown } from './atoms/TreeDropdown'; import { TreeNodeItem } from './atoms/TreeNodeItem'; import { TreeSearchInput } from './atoms/TreeSearchInput'; import { - useTreeDropdown, - useTreeFocusManagement, - useTreeKeyboardNavigation + useTreeDropdown, + useTreeFocusManagement, + useTreeKeyboardNavigation, } from './hooks'; import { MUIAsyncTreeSelectProps } from './MUIAsyncTreeSelect.interface'; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/MUITagSuggestion/MUITagSuggestion.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/MUITagSuggestion/MUITagSuggestion.tsx index 6ae8b55dbe2..7c433bb5a69 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/MUITagSuggestion/MUITagSuggestion.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/MUITagSuggestion/MUITagSuggestion.tsx @@ -15,13 +15,13 @@ import { Autocomplete, Box, TextField } from '@mui/material'; import { debounce, isArray, isEmpty } from 'lodash'; import { EntityTags } from 'Models'; import { - FC, - ReactNode, - useCallback, - useEffect, - useMemo, - useRef, - useState + FC, + ReactNode, + useCallback, + useEffect, + useMemo, + useRef, + useState, } from 'react'; import { useTranslation } from 'react-i18next'; import { TagSource } from '../../../generated/entity/data/container'; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/MUIUserTeamSelect/MUIUserTeamSelect.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/MUIUserTeamSelect/MUIUserTeamSelect.tsx index f4ea8c2a1ae..e907427739a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/MUIUserTeamSelect/MUIUserTeamSelect.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/MUIUserTeamSelect/MUIUserTeamSelect.tsx @@ -23,12 +23,12 @@ import { SearchIndex } from '../../../enums/search.enum'; import { EntityReference } from '../../../generated/entity/type'; import { searchData } from '../../../rest/miscAPI'; import { - formatTeamsResponse, - formatUsersResponse + formatTeamsResponse, + formatUsersResponse, } from '../../../utils/APIUtils'; import { - getEntityName, - getEntityReferenceFromEntity + getEntityName, + getEntityReferenceFromEntity, } from '../../../utils/EntityUtils'; import { ProfilePicture } from '../atoms/ProfilePicture'; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useDrawerBody.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useDrawerBody.tsx index c84ef54d3f9..386ad1ac52d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useDrawerBody.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useDrawerBody.tsx @@ -60,9 +60,8 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => { {loading && ( @@ -78,7 +77,7 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => { alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(255, 255, 255, 0.8)', - zIndex: 1, + zIndex: 1000, }}> {loadingMessage && ( @@ -88,7 +87,14 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => { )} )} - {children} + + {children} + ), [children, loading, loadingMessage, padding, sx]