diff --git a/cookbook/templates/base.html b/cookbook/templates/base.html
index 162d00db1..51f4d9f1c 100644
--- a/cookbook/templates/base.html
+++ b/cookbook/templates/base.html
@@ -481,6 +481,14 @@
             overflow-x: hidden;
         }
     }
+
+    #id_base_container {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .fixed-bottom {
+        padding-bottom: max(0.5rem, calc(env(safe-area-inset-bottom) - 0.5rem)) !important;
+    }
 </style>
 
 </body>
diff --git a/vue/src/components/BottomNavigationBar.vue b/vue/src/components/BottomNavigationBar.vue
index e80fb2daf..79a643049 100644
--- a/vue/src/components/BottomNavigationBar.vue
+++ b/vue/src/components/BottomNavigationBar.vue
@@ -91,16 +91,11 @@ export default {
 }
 </script>
 
-<style>
-
-#id_base_container, .fixed-bottom {
-    padding-bottom: env(safe-area-inset-bottom) !important;
-}
-
-</style>
 
 <style scoped>
 
+
+
 .bottom-nav-link {
     color: #666666
 }