From 8f259e17562d89c95dc0136e887f2bea79f3b2d7 Mon Sep 17 00:00:00 2001
From: Lukas Bableck <lukas.bableck@bit-host.io>
Date: Fri, 10 Mar 2023 17:42:06 +0100
Subject: [PATCH 1/2] Add padding to bottom-nav
---
src/layouts/Layout.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 9069aef70..49c3dfe51 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -95,7 +95,7 @@
</main>
<!-- Mobile Only -->
- <div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
+ <div v-if="$root.isMobile" style="width: 100%; height: calc(60px + env(safe-area-inset-bottom));" />
<nav v-if="$root.isMobile && $root.loggedIn" class="bottom-nav">
<router-link to="/dashboard" class="nav-link">
<div><font-awesome-icon icon="tachometer-alt" /></div>
@@ -182,14 +182,14 @@ export default {
z-index: 1000;
position: fixed;
bottom: 0;
- height: 60px;
+ height: calc(60px + env(safe-area-inset-bottom));
width: 100%;
left: 0;
background-color: #fff;
box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05);
text-align: center;
white-space: nowrap;
- padding: 0 10px;
+ padding: 0 10px env(safe-area-inset-bottom);
a {
text-align: center;
From cf59832d51efa911df2f7683a0cbad70e0d0d1e4 Mon Sep 17 00:00:00 2001
From: Lukas Bableck <lukas.bableck@bit-host.io>
Date: Fri, 10 Mar 2023 17:42:30 +0100
Subject: [PATCH 2/2] Set viewport-fit=cover in meta viewport tag
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 6a5525fb4..01f68410c 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="manifest" href="/manifest.json" />