[@mantine/core] Modal: Fix mobile web modal height display bug. vh ->…

[connershoop]

#4516

Fix for mobile web modal display bug by replacing vh unit with newer dvh unit.

(Can redo with branch off of dev if needed)

[rtivital]

Have you checked on a mobile device that the fix works?

[connershoop]

Have you checked on a mobile device that the fix works?

I have only manually overwritten the mantine modal css in my own project. Then, on a mobile device, it does work as intended. I will try and test manually in this repo when I get a chance.
It is important to note that this dvh unit is not as universally supported as vh, which could cause problems.
https://caniuse.com/viewport-unit-variants

[connershoop]

I have run the storybook locally via npm run storybook Modal and tunneled to my mobile device. The screenshots show the result of the With Scroll modal, after clicking Open canvas in new tab.
First screenshot is master branch, second is connershoop:mobile-modal-display-bug-fix branch.

Hope this helps

[hulloitskai]

Our team ran into this too, and I can confirm that the dvh units fix it on iOS mobile safari.

Our current solution:

export const APP_THEME: MantineThemeOverride = {
  /* ...snip... */
  components: {
    Modal: {
      content: {
        maxHeight: `calc(100dvh - (5dvh * 2))`
      }
    }
  }
}

[rtivital]

Thanks!