From 87f7984036bc4b957086857690bd654ec5b67748 Mon Sep 17 00:00:00 2001
From: masiulis <karolis.masiulis@ugnis.com>
Date: Thu, 9 Nov 2023 16:20:15 +0200
Subject: [PATCH 1/3] Fix mobile viewport size calculation

---
 src/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index 8b41a44f..7cc14ed8 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -338,8 +338,8 @@ export const themeOverrides = {
           },
           dialog: {
             outline: "unset",
-            minH: "calc(100vh - 4rem)",
-            maxW: "calc(100vw - 4rem)",
+            minH: "calc(100dvh - 4rem)",
+            maxW: "calc(100dvw - 4rem)",
             my: "2rem",
             borderRadius: "3xl",
             overflow: "hidden",

From 226287955b34f046b3371cc208ed81dba918ddd8 Mon Sep 17 00:00:00 2001
From: masiulis <karolis.masiulis@ugnis.com>
Date: Thu, 9 Nov 2023 19:21:50 +0200
Subject: [PATCH 2/3] Use polyfilled version for older browsers

---
 src/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index 7cc14ed8..2dd67342 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -338,8 +338,8 @@ export const themeOverrides = {
           },
           dialog: {
             outline: "unset",
-            minH: "calc(100dvh - 4rem)",
-            maxW: "calc(100dvw - 4rem)",
+            minH: "calc(var(--chakra-vh) - 4rem)",
+            maxW: "calc(100vw - 4rem)",
             my: "2rem",
             borderRadius: "3xl",
             overflow: "hidden",

From 1a16a9164464d9106236f779ccfc2419f53d349a Mon Sep 17 00:00:00 2001
From: masiulis <karolis.masiulis@ugnis.com>
Date: Fri, 10 Nov 2023 11:41:12 +0200
Subject: [PATCH 3/3] Enforce vh or dvh as fill-available cannot be used in
 calc()

---
 src/theme.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/theme.ts b/src/theme.ts
index 2dd67342..2835e901 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -339,7 +339,7 @@ export const themeOverrides = {
           dialog: {
             outline: "unset",
             minH: "calc(var(--chakra-vh) - 4rem)",
-            maxW: "calc(100vw - 4rem)",
+            maxW: "calc(var(--chakra-vw) - 4rem)",
             my: "2rem",
             borderRadius: "3xl",
             overflow: "hidden",
@@ -355,6 +355,17 @@ export const themeOverrides = {
   },
   styles: {
     global: {
+      // supporting older browsers but avoiding fill-available CSS as it doesn't work https://github.com/chakra-ui/chakra-ui/blob/073bbcd21a9caa830d71b61d6302f47aaa5c154d/packages/components/css-reset/src/css-reset.tsx#L5
+      ":root": {
+        "--chakra-vh": "100vh",
+        "--chakra-vw": "100vw",
+      },
+      "@supports (height: 100dvh) and (width: 100dvw) ": {
+        ":root": {
+          "--chakra-vh": "100dvh",
+          "--chakra-vw": "100dvw",
+        },
+      },
       ".rdg": {
         contain: "size layout style paint",
         borderRadius: "lg",