From 773444b1e2e85c52459c661b9473c94e3b1d06e9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 11 Sep 2021 11:17:49 +0200
Subject: [PATCH] Bugfix/fix home button overlap on ios (#360)

* Fix overlap

* Update changelog
---
 CHANGELOG.md                                  | 1 +
 apps/client/src/app/pages/home/home-page.scss | 3 +++
 apps/client/src/app/pages/zen/zen-page.scss   | 3 +++
 apps/client/src/index.html                    | 5 ++++-
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65b2007f6..a74c7d9a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed the _Fear & Greed Index_ (market mood)
+- Fixed the overlap of the home button with tabs on iOS (_Add to Home Screen_)
 
 ## 1.49.0 - 08.09.2021
 
diff --git a/apps/client/src/app/pages/home/home-page.scss b/apps/client/src/app/pages/home/home-page.scss
index 8ede226c2..8eb22b723 100644
--- a/apps/client/src/app/pages/home/home-page.scss
+++ b/apps/client/src/app/pages/home/home-page.scss
@@ -16,6 +16,9 @@
     right: 0;
     top: 0;
 
+    margin-bottom: env(safe-area-inset-bottom);
+    margin-bottom: constant(safe-area-inset-bottom);
+
     ::ng-deep {
       .mat-tab-body-wrapper {
         height: 100%;
diff --git a/apps/client/src/app/pages/zen/zen-page.scss b/apps/client/src/app/pages/zen/zen-page.scss
index 2b8093bab..bc2f6686c 100644
--- a/apps/client/src/app/pages/zen/zen-page.scss
+++ b/apps/client/src/app/pages/zen/zen-page.scss
@@ -12,6 +12,9 @@
     right: 0;
     top: 0;
 
+    margin-bottom: env(safe-area-inset-bottom);
+    margin-bottom: constant(safe-area-inset-bottom);
+
     ::ng-deep {
       .mat-tab-body-wrapper {
         height: 100%;
diff --git a/apps/client/src/index.html b/apps/client/src/index.html
index 96c38f3e8..a7c598972 100644
--- a/apps/client/src/index.html
+++ b/apps/client/src/index.html
@@ -27,7 +27,10 @@
       name="twitter:title"
       content="Ghostfolio – Open Source Wealth Management Software"
     />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, viewport-fit=cover, width=device-width"
+    />
     <meta property="og:description" content="" />
     <meta
       property="og:title"