From 67bd82fcea852ce42cabd216dcaa16805afbc60c Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Thu, 5 Aug 2021 10:55:28 +0200
Subject: [PATCH] added padding bottom for iphone x and beyond

---
 components/Shell.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 1fe932e4ba..79cd18fe3b 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -146,7 +146,9 @@ export default function Shell(props) {
               <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
 
               {/* show bottom navigation for md and smaller (tablet and phones) */}
-              <nav className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
+              <nav
+                style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+                className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.name === "Settings" ? (