From 8822a25909bc2e1c995c7ee4f3f8f24b4f1091a7 Mon Sep 17 00:00:00 2001
From: Robin Malhotra <5009041+codeOfRobin@users.noreply.github.com>
Date: Thu, 5 Apr 2018 23:42:37 +0530
Subject: [PATCH] iPhone X support (#4835)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds support for the iPhone X safe area insets.

Link: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Here’s a preview of what it looks like: https://twitter.com/codeOfRobin/status/981473964223430658

Signed-off-by: Robin Malhotra <me@rmalhotra.com>
---
 www/src/components/navigation-mobile.js | 1 +
 www/src/html.js                         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/www/src/components/navigation-mobile.js b/www/src/components/navigation-mobile.js
index 39944104ad987..90cce912982a5 100644
--- a/www/src/components/navigation-mobile.js
+++ b/www/src/components/navigation-mobile.js
@@ -45,6 +45,7 @@ const MobileNavigation = () => (
       borderTop: `1px solid ${colors.ui.light}`,
       background: colors.ui.whisper,
       fontFamily: typography.options.headerFontFamily.join(`,`),
+      paddingBottom: `env(safe-area-inset-bottom)`,
       [presets.Tablet]: {
         display: `none`,
       },
diff --git a/www/src/html.js b/www/src/html.js
index d72a008c8f63d..d48a2c99322ed 100644
--- a/www/src/html.js
+++ b/www/src/html.js
@@ -49,7 +49,7 @@ export default class HTML extends React.Component {
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
           <meta
             name="viewport"
-            content="width=device-width, initial-scale=1.0"
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
           />
           <link
             rel="apple-touch-icon"