fix: allow user optin to vh polyfill

.changeset/itchy-deers-smash.md

@@ -0,0 +1,23 @@
+---
+"@chakra-ui/styled-system": patch
+"@chakra-ui/theme": patch
+---
+
+Allow user optin to the 100vh polyfill because it's only useful in absolute or
+fixed layout modes.
+
+Chakra new polyfills the `100vh` attribute to use either the literal `100vh` or
+`-webkit-fill-available` where supported. To use this feature, set the height
+values to `$100vh` instead of `100vh`.
+
+```jsx live=false
+// Might not work in all cases
+<Box minHeight="100vh" position="absolute">
+  Test
+</Box>
+
+// Polyfilled version ensures 100vh work correctly
+<Box minHeight="$100vh" position="absolute">
+  Test
+</Box>
+```

packages/components/styled-system/src/utils/transform-functions.ts

@@ -41,7 +41,7 @@ export const transformFunctions = {
     return value
   },
   vh(value: number | string) {
-    return value === "100vh" ? "var(--chakra-vh)" : value
+    return value === "$100vh" ? "var(--chakra-vh)" : value
   },
   px(value: number | string) {
     if (value == null) return value

packages/components/theme/src/components/modal.ts

@@ -87,7 +87,7 @@ function getSize(value: string) {
     return definePartsStyle({
       dialog: {
         maxW: "100vw",
-        minH: "100vh",
+        minH: "$100vh",
         my: "0",
         borderRadius: "0",
       },