fix: use dynamic view height for mobile support (#1014)

Author: KaneFreeman

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;
 

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;

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;

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;

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