diff --git a/cookbook/templates/base.html b/cookbook/templates/base.html
index d84ccbd4..51f4d9f1 100644
--- a/cookbook/templates/base.html
+++ b/cookbook/templates/base.html
@@ -10,7 +10,7 @@
     <title>{% block title %}
     {% endblock %}</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
     <meta name="robots" content="noindex,nofollow"/>
 
     <link rel="icon" href="{{ theme_values.logo_color_svg }}">
@@ -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/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 7fd5dbe7..74ff16a4 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -1321,3 +1321,9 @@ textarea:not(.form-control) {
     border: 0 !important;
 }
 </style>
+
+<style scoped>
+.row.fixed-bottom {
+    margin: 0;
+}
+</style>
diff --git a/vue/src/components/BottomNavigationBar.vue b/vue/src/components/BottomNavigationBar.vue
index 3801d9bd..23b0a244 100644
--- a/vue/src/components/BottomNavigationBar.vue
+++ b/vue/src/components/BottomNavigationBar.vue
@@ -108,4 +108,4 @@ export default {
     -o-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }
-</style>
\ No newline at end of file
+</style>