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>

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';

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';
 

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';

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';
 

openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useDrawerBody.tsx

@@ -60,9 +60,8 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
       <Box
         sx={{
           flex: 1,
-          overflow: 'auto',
-          p: padding,
           position: 'relative',
+          overflow: 'hidden',
           ...sx,
         }}>
         {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,
             }}>
             <CircularProgress />
             {loadingMessage && (
@@ -88,7 +87,14 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
             )}
           </Box>
         )}
-        {children}
+        <Box
+          sx={{
+            overflow: 'auto',
+            height: '100%',
+            p: padding,
+          }}>
+          {children}
+        </Box>
       </Box>
     ),
     [children, loading, loadingMessage, padding, sx]