From 507d48dc94b104ef90794f2fa1fbec8181f47fe8 Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Tue, 2 Jan 2024 11:58:05 -0500
Subject: [PATCH] fix: use dynamic view height for mobile support

---
 .../components/docs/table_of_contents/DocsTableOfContents.tsx | 2 +-
 packages/docs/src/components/layout/Page.tsx                  | 2 +-
 packages/docs/src/pages/community.tsx                         | 2 +-
 packages/docs/src/pages/releases.tsx                          | 2 +-
 tailwind.base.config.js                                       | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docs/src/components/docs/table_of_contents/DocsTableOfContents.tsx b/packages/docs/src/components/docs/table_of_contents/DocsTableOfContents.tsx
index 95f380d1d..f0d0231e7 100644
--- a/packages/docs/src/components/docs/table_of_contents/DocsTableOfContents.tsx
+++ b/packages/docs/src/components/docs/table_of_contents/DocsTableOfContents.tsx
@@ -144,7 +144,7 @@ const StyledNav = styled('nav')(
     align-self: flex-start;
     position: sticky;
     top: 0;
-    max-height: calc(100vh - 72px);
+    max-height: calc(100dvh - 72px);
     overflow-y: auto;
     top: 16px;
 
diff --git a/packages/docs/src/components/layout/Page.tsx b/packages/docs/src/components/layout/Page.tsx
index 311b7bb02..d252aec35 100644
--- a/packages/docs/src/components/layout/Page.tsx
+++ b/packages/docs/src/components/layout/Page.tsx
@@ -16,7 +16,7 @@ import type { DocsGroup, SearchablePage } from '../../interface';
 
 const StyledPageContentWrapper = styled('div')`
   display: block;
-  height: calc(100vh - 72px);
+  height: calc(100dvh - 72px);
   width: 100%;
   position: relative;
   top: 72px;
diff --git a/packages/docs/src/pages/community.tsx b/packages/docs/src/pages/community.tsx
index ecfe4dece..87079a606 100644
--- a/packages/docs/src/pages/community.tsx
+++ b/packages/docs/src/pages/community.tsx
@@ -13,7 +13,7 @@ const StyledCommunityContent = styled('div')(
   ({ theme }) => `
     width: 100%;
     padding-top: 72px;
-    min-height: calc(100vh - 72px);
+    min-height: calc(100dvh - 72px);
     display: flex;
     flex-direction: column;
     gap: 80px;
diff --git a/packages/docs/src/pages/releases.tsx b/packages/docs/src/pages/releases.tsx
index d053110d3..941b7025e 100644
--- a/packages/docs/src/pages/releases.tsx
+++ b/packages/docs/src/pages/releases.tsx
@@ -20,7 +20,7 @@ const StyledReleaseContent = styled('div')(
   ({ theme }) => `
     width: 100%;
     padding-top: 72px;
-    min-height: calc(100vh - 72px);
+    min-height: calc(100dvh - 72px);
     display: flex;
     flex-direction: column;
     gap: 20px;
diff --git a/tailwind.base.config.js b/tailwind.base.config.js
index 2e1111af8..fdfef24bc 100644
--- a/tailwind.base.config.js
+++ b/tailwind.base.config.js
@@ -3,8 +3,8 @@ module.exports = {
   theme: {
     extend: {
       height: {
-        main: "calc(100vh - 64px)",
-        "main-mobile": "calc(100vh - 128px)",
+        main: "calc(100dvh - 64px)",
+        "main-mobile": "calc(100dvh - 128px)",
         "media-library-dialog": "80vh",
         "media-card": "240px",
         "media-preview-image": "104px",