Fix landscape view on mobile devices

docusaurus.config.js

@@ -15,10 +15,16 @@ module.exports = {
   onBrokenMarkdownLinks: 'warn',
   themeConfig: {
     metadata: [
-        {
-            name: 'theme-color',
-            content: '#0072c6'
-        }
+      {
+        name: 'theme-color',
+        content: '#0072c6'
+      },
+      // Use viewport-fit=cover to stretch website into safe-area (camera notch, swipe-for-menu etc.) on mobile.
+      // Combine with padding in CSS to avoid conflicts using env(safe-area-inset-*) variables
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1.0, viewport-fit=cover'
+      }
     ],
     navbar: {
       title: 'Pester',

src/css/custom.css

@@ -129,13 +129,15 @@
 .navbar__brand strong {
   font-weight: 400;
 }
+
 .navbar__brand {
   font-size: 19px;
 }
 
 .navbar__link:hover {
   text-decoration: underline;
 }
+
 .navbar-sidebar .menu__link,
 .navbar-sidebar__back,
 .navbar__toggle {
@@ -166,3 +168,55 @@ table {
     flex: 1 0 !important;
   }
 }
+
+/*
+  Make sure content isn't being covered by camera notch or UI elements on mobile.
+  Neccessary due to use of viewport-fit=cover to support landscape mode on phones etc.
+
+  Using 0.001px as 0px is minified to 0 which breaks min/max/calc.
+  TODO: Can't repro with local build, so possibly caused by Netlify cache. Try to remove later.
+*/
+@supports(padding: max(0px)) {
+  .navbar {
+    padding-top: max(var(--ifm-navbar-padding-vertical), env(safe-area-inset-top,0.001px));
+    padding-right: max(var(--ifm-navbar-padding-horizontal), env(safe-area-inset-right,0.001px));
+    padding-bottom: var(--ifm-navbar-padding-vertical);
+    padding-left: max(var(--ifm-navbar-padding-horizontal), env(safe-area-inset-left,0.001px));
+  }
+
+  .navbar-sidebar__brand {
+    padding-top: max(var(--ifm-navbar-padding-vertical), env(safe-area-inset-top, 0.001px));
+    padding-right: var(--ifm-navbar-padding-horizontal);
+    padding-bottom: var(--ifm-navbar-padding-vertical);
+    padding-left: max(var(--ifm-navbar-padding-horizontal), env(safe-area-inset-left, 0.001px));
+  }
+
+  .navbar-sidebar__item {
+    padding-left: max(0.5rem, env(safe-area-inset-left, 0.001px) - 0.5rem);
+  }
+
+  header > div.container,
+  main > .container {
+    padding-right: max(var(--ifm-spacing-horizontal), env(safe-area-inset-right,0.001px));
+    padding-left: max(var(--ifm-spacing-horizontal), env(safe-area-inset-left,0.001px));
+  }
+
+  .footer {
+    padding-top: var(--ifm-footer-padding-vertical);
+    padding-right: max(var(--ifm-footer-padding-horizontal), env(safe-area-inset-right,0.001px));
+    padding-bottom: max(var(--ifm-footer-padding-vertical), env(safe-area-inset-bottom,0.001px));
+    padding-left: max(var(--ifm-footer-padding-horizontal), env(safe-area-inset-left,0.001px));
+  }
+
+  @media (max-width: 996px) {
+    .footer {
+      /* calc/max/min breaks when this is set to 0 in default template */
+      --ifm-footer-padding-horizontal: 0px;
+    }
+
+    /* DocSearch is in absolute right position on smaller devices so navbar-padding doesn't affect it */
+    .DocSearch-Button {
+      margin-right: max(0.001px, env(safe-area-inset-right,0.001px) - var(--ifm-navbar-padding-horizontal));
+    }
+  }
+}