From 9849bc055c8bfc4d4535790c2053309bbd5d9d84 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sun, 20 Nov 2022 12:57:53 -0800
Subject: [PATCH] Use safe insets on bottom of screen (#755)

---
 layouts/default.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/layouts/default.vue b/layouts/default.vue
index 055420e33..4cbc16fec 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -867,6 +867,7 @@ export default {
       width: 100%;
       transition: height 0.25s ease-in-out;
       height: var(--size-mobile-navbar-height);
+      padding-bottom: env(safe-area-inset-bottom);
       position: fixed;
       left: 0;
       bottom: 0;
@@ -977,6 +978,21 @@ export default {
 
       &.expanded {
         height: var(--size-mobile-navbar-height-expanded);
+
+        &::after {
+          top: var(--size-mobile-navbar-height-expanded);
+        }
+      }
+
+      &::after {
+        content: '';
+        background: var(--color-raised-bg);
+        width: 100%;
+        height: 50px;
+        position: absolute;
+        top: var(--size-mobile-navbar-height);
+        left: 0;
+        transition: top 0.25s ease-in-out;
       }
     }
   }