fill-available

theme/components/Modal.ts

@@ -22,7 +22,7 @@ const baseStyleDialog = defineStyle((props) => {
 const baseStyleDialogContainer = defineStyle({
   '::-webkit-scrollbar': { display: 'none' },
   'scrollbar-width': 'none',
-  '@supports (height: -webkit-fill-available)': { height: '100vh' },
+  '@supports (height: -webkit-fill-available)': { height: '-webkit-fill-available' },
 });
 
 const baseStyleHeader = defineStyle((props) => ({
@@ -63,6 +63,7 @@ const baseStyleOverlay = defineStyle({
 const baseStyle = definePartsStyle((props) => ({
   dialog: runIfFn(baseStyleDialog, props),
   dialogContainer: baseStyleDialogContainer,
+
   header: runIfFn(baseStyleHeader, props),
   body: baseStyleBody,
   footer: baseStyleFooter,

ui/shared/FormModal.tsx

@@ -47,7 +47,7 @@ export default function FormModal<TData>({
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>
         <ModalCloseButton/>
-        <ModalBody mb={ 0 }>
+        <ModalBody>
           { (isAlertVisible || text) && (
             <Box marginBottom={{ base: 6, lg: 8 }}>
               { text && (