From eba9f0eac0fb609679e1c6b5cd7dadb31ceec8e8 Mon Sep 17 00:00:00 2001
From: Paul Davis <PaulAdamDavis@users.noreply.github.com>
Date: Tue, 22 Sep 2020 07:43:17 +0100
Subject: [PATCH] Added margin to bottom of Admin when installed as PWA on
 newer iOS devices (#1667)

no issue

On newer iOS devices with no home button, we have this bar at the bottom of the screen instead. When installed as a PWA, the mobile nav sits under that bar. I'm unsure how much Ghost is used this way, but this is a small QOL improvement for those who do.

This PR uses the native `env` CSS custom properties Safari has to add a propriety amount of `padding-bottom` to the mobile nav bar, and also the global container to prevent anything in the iframe from being hidden by the taller nav bar. If the device does not support these `env` vars, is has no adverse affect. In order for this to work, the `<meta name="viewport" />` tag needs `viewport-fit=cover` added to it.

MDN docs for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/env
---
 app/index.html              |  2 +-
 app/styles/layouts/main.css | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/index.html b/app/index.html
index 378f59119..9ac6c2a83 100644
--- a/app/index.html
+++ b/app/index.html
@@ -11,7 +11,7 @@
 
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
-    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui, viewport-fit=cover" />
     <meta name="pinterest" content="nopin" />
 
     <meta http-equiv="cleartype" content="on" />
diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css
index 45a60501f..2cede6a6a 100644
--- a/app/styles/layouts/main.css
+++ b/app/styles/layouts/main.css
@@ -635,6 +635,12 @@
         padding-bottom: 55px;
     }
 
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+        .gh-viewport {
+            padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
+        }
+    }
+
     .gh-mobile-nav-bar {
         display: flex;
         align-items: center;
@@ -647,6 +653,12 @@
         border-top: var(--lightgrey) 1px solid;
     }
 
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+        .gh-mobile-nav-bar {
+            padding-bottom: env(safe-area-inset-bottom, 0px);
+        }
+    }
+
     .gh-mobile-nav-bar a,
     .gh-mobile-nav-bar-more {
         height: 55px;