Full screen modals don't appear full screen (iOS Safari)

Description

When I open a full screen modal on iOS safari it does not fill the full screen. There’s a gap at the bottom the screen.

Link to Reproduction

https://chakra-ui-git-fix-modal-height-ios-chakra-ui.vercel.app/docs/overlay/modal#modal-sizes

Steps to reproduce

On an iPhone

1. Go to https://chakra-ui-git-fix-modal-height-ios-chakra-ui.vercel.app/docs/overlay/modal#modal-sizes
2. Click on "open full modal’
3. full modal does not cover full screen when the safari navigators aren’t there (see attached image)

Chakra UI Version

1.6.4

Browser

Safari on iPhone X 14.7.1

Operating System

• macOS
• Windows
• Linux

Additional Information

possibly caused by css styling below as removing it allows the modal to go full screen.

@supports (height: -webkit-fill-available)
modal:1.css-v9b9hc {
  height: -webkit-fill-available;
}

However the above code was added to solve this other issue: https://github.com/chakra-ui/chakra-ui/pull/3806

[metanivek]

Is there a workaround to remove that specific CSS that seems to be causing the issue?

Edit: I found a workaround for my purposes. I’m not sure if this is the best way, or even a good idea, but sharing in case it is useful for others.

const customTheme = extendTheme({
  components: {
    Modal: {
      baseStyle: {
        dialogContainer: {
          "@supports(height: -webkit-fill-available)": {},
        },
      },
    },
  },
});

[KiranMantha]

on top of @metanivek solution, i added height as well:

Modal: {
      baseStyle: {
        dialogContainer: {
          '@supports(height: -webkit-fill-available)': {},
          height: '100%'
        }
      }
    }

this worked for me.