Merge pull request #415 from calendso/iphone-fixes

added bottom nav padding bottom for iphone x and beyond

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" ? (