Fix Mobile View gradient on safari

docusaurus.config.js

@@ -169,6 +169,27 @@ const config = {
         content: 'width=device-width, initial-scale=1, viewport-fit=cover',
       },
     },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'theme-color',
+        content: 'rgba(0, 0, 0, 0)',
+      },
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'apple-mobile-web-app-capable',
+        content: 'yes',
+      },
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'apple-mobile-web-app-status-bar-style',
+        content: 'black-translucent',
+      },
+    },
     {
       tagName: 'link',
       attributes: {
@@ -207,6 +228,23 @@ const config = {
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
       `,
     },
+    {
+      tagName: 'script',
+      attributes: {
+        type: 'text/javascript',
+      },
+      innerHTML: `
+          (function() {
+            var isHomepage =
+              window.location.pathname === '/' ||
+              /^\\/push-chain-website\\/pr-preview\\/pr-\\d+\\/?$/.test(window.location.pathname);
+
+            if (isHomepage) {
+              document.body.classList.add('homepage-body');
+            }
+          })();
+        `,
+    },
     {
       tagName: 'script',
       attributes: {

src/components/BRB/BRBParallax.tsx

@@ -143,9 +143,9 @@ const Container = styled.div`
 
 const BRBWrapper = styled.div`
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   @media ${device.mobileL} {
-    min-height: 100vh;
+    min-height: 100dvh;
   }
 `;
 

src/components/Explainer/Explainer.tsx

@@ -1051,7 +1051,7 @@ const DesktopTOC = styled(ItemV)`
 
   justify-content: flex-start;
 
-  max-height: 90vh;
+  max-height: 90dvh;
   overflow-y: auto;
   overflow-x: hidden; /* Prevent horizontal scrollbar */