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

@@ -21,24 +21,24 @@ import { ResourceEntity } from '../../../context/PermissionProvider/PermissionPr
 import { CreateDataProduct } from '../../../generated/api/domains/createDataProduct';
 import {
   CreateDomain,
-    DomainType
+  DomainType,
 } from '../../../generated/api/domains/createDomain';
 import { Operation } from '../../../generated/entity/policies/policy';
 import { EntityReference } from '../../../generated/entity/type';
 import {
   FieldProp,
   FieldTypes,
-    FormItemLayout
+  FormItemLayout,
 } from '../../../interface/FormUtils.interface';
 import {
   domainTypeTooltipDataRender,
-    iconTooltipDataRender
+  iconTooltipDataRender,
 } from '../../../utils/DomainUtils';
 import { generateFormFields, getField } from '../../../utils/formUtils';
 import { checkPermission } from '../../../utils/PermissionsUtils';
 import {
   DEFAULT_DATA_PRODUCT_ICON,
-    DEFAULT_DOMAIN_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

@@ -21,7 +21,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-    useState
+  useState,
 } from 'react';
 import { TreeNode } from '../atoms/asyncTreeSelect/types';
 import { useAsyncTreeSelect } from '../atoms/asyncTreeSelect/useAsyncTreeSelect';
@@ -32,7 +32,7 @@ import { TreeSearchInput } from './atoms/TreeSearchInput';
 import {
   useTreeDropdown,
   useTreeFocusManagement,
-    useTreeKeyboardNavigation
+  useTreeKeyboardNavigation,
 } from './hooks';
 import { MUIAsyncTreeSelectProps } from './MUIAsyncTreeSelect.interface';
 

openmetadata-ui/src/main/resources/ui/src/components/common/MUITagSuggestion/MUITagSuggestion.tsx

@@ -21,7 +21,7 @@ import {
   useEffect,
   useMemo,
   useRef,
-    useState
+  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

@@ -24,11 +24,11 @@ import { EntityReference } from '../../../generated/entity/type';
 import { searchData } from '../../../rest/miscAPI';
 import {
   formatTeamsResponse,
-    formatUsersResponse
+  formatUsersResponse,
 } from '../../../utils/APIUtils';
 import {
   getEntityName,
-    getEntityReferenceFromEntity
+  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,8 +87,15 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
             )}
           </Box>
         )}
+        <Box
+          sx={{
+            overflow: 'auto',
+            height: '100%',
+            p: padding,
+          }}>
           {children}
         </Box>
+      </Box>
     ),
     [children, loading, loadingMessage, padding, sx]
   );