Fix overlap

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%;

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%;

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"