From eb5850687e0984d95c3dd06e57716188c69cae42 Mon Sep 17 00:00:00 2001
From: Tim Kolberger <tim@kolberger.eu>
Date: Tue, 28 Dec 2021 22:44:06 +0100
Subject: [PATCH] fix(modal): show footer with size=full

---
 .changeset/twelve-papayas-judge.md     | 5 +++++
 packages/theme/src/components/modal.ts | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/twelve-papayas-judge.md

diff --git a/.changeset/twelve-papayas-judge.md b/.changeset/twelve-papayas-judge.md
new file mode 100644
index 00000000000..505de0288aa
--- /dev/null
+++ b/.changeset/twelve-papayas-judge.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/theme": patch
+---
+
+Fixed an issue where the Modal Footer was out of the viewport for `size="full"`.
diff --git a/packages/theme/src/components/modal.ts b/packages/theme/src/components/modal.ts
index a826e7058e8..db8e4db16cd 100644
--- a/packages/theme/src/components/modal.ts
+++ b/packages/theme/src/components/modal.ts
@@ -83,7 +83,14 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
 function getSize(value: string): PartsStyleObject<typeof parts> {
   if (value === "full") {
     return {
-      dialog: { maxW: "100vw", minH: "100vh", my: 0 },
+      dialog: {
+        maxW: "100vw",
+        minH: "100vh",
+        "@supports(min-height: -webkit-fill-available)": {
+          minH: "-webkit-fill-available",
+        },
+        my: 0,
+      },
     }
   }
   return {