From 0572d5653ef966569eeb1aacfa995e65afd94199 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Thu, 5 Aug 2021 11:31:37 +0200
Subject: [PATCH] replaced iphone check with general standalone mode media
 query for padding bottom on bottom nav

---
 components/Shell.tsx | 4 +---
 styles/globals.css   | 6 ++++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 79cd18fe..480195e5 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -146,9 +146,7 @@ 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
-                style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
-                className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
+              <nav className="bottom-nav md:hidden flex fixed bottom-0 bg-white w-full shadow">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.name === "Settings" ? (
diff --git a/styles/globals.css b/styles/globals.css
index 59a997fc..008d057b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,6 +81,12 @@
     }
 }
 
+@media all and (display-mode: standalone) {
+  .bottom-nav {
+    padding-bottom: 24px;
+  }
+}
+
 .react-multi-email > [type='text'] {
     --tw-ring-shadow: 0 0 0 0 0;
 }