Merge pull request #2895 from tomtjes/fix-iOS-view

Fix iOS view

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>

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>

vue/src/components/BottomNavigationBar.vue

@@ -108,4 +108,4 @@ export default {
     -o-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }
-</style>
+</style>