modal scroll and position fix

theme/components/Modal.ts

@@ -8,9 +8,16 @@ const baseStyleDialog: SystemStyleFunction = (props) => {
     padding: 8,
     borderRadius: 'lg',
     bg: mode('white', 'gray.900')(props),
+    margin: 'auto',
   };
 };
 
+const baseStyleDialogContainer = {
+  '::-webkit-scrollbar': { display: 'none' },
+  'scrollbar-width': 'none',
+  '@supports (height: -webkit-fill-available)': { height: '100vh' },
+};
+
 const baseStyleHeader: SystemStyleFunction = (props) => ({
   padding: 0,
   marginBottom: 8,
@@ -46,6 +53,7 @@ const baseStyleOverlay = {
 
 const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   dialog: baseStyleDialog(props),
+  dialogContainer: baseStyleDialogContainer,
   header: baseStyleHeader(props),
   body: baseStyleBody,
   footer: baseStyleFooter,