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",