From ca7d56cf1bd412619a03ea0c34c1823fe53dc22a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 1 Jan 2024 17:54:50 +0100
Subject: [PATCH] Improve tabs on iOS (Add to Home Screen)

---
 apps/client/src/app/app.component.scss | 6 +++---
 apps/client/src/styles.scss            | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss
index 2cc6d9a17..21d33e3c9 100644
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@@ -2,7 +2,7 @@
 
 :host {
   display: block;
-  min-height: 100vh;
+  min-height: 100svh;
 
   &.has-info-message {
     header {
@@ -30,7 +30,7 @@
     }
 
     main {
-      min-height: calc(100vh - 2 * var(--mat-toolbar-standard-height));
+      min-height: calc(100svh - 2 * var(--mat-toolbar-standard-height));
     }
   }
 
@@ -44,7 +44,7 @@
   }
 
   main {
-    min-height: calc(100vh - var(--mat-toolbar-standard-height));
+    min-height: calc(100svh - var(--mat-toolbar-standard-height));
   }
 }
 
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index fbcc5e73f..3aaf768c2 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -385,7 +385,7 @@ ngx-skeleton-loader {
 
 .has-info-message {
   .page.has-tabs {
-    height: calc(100vh - 2 * var(--mat-toolbar-standard-height));
+    height: calc(100svh - 2 * var(--mat-toolbar-standard-height));
   }
 }
 
@@ -505,6 +505,8 @@ ngx-skeleton-loader {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: constant(safe-area-inset-bottom);
 
   .fab-container {
     bottom: 2rem;
@@ -520,9 +522,7 @@ ngx-skeleton-loader {
   }
 
   &.has-tabs {
-    height: calc(100vh - var(--mat-toolbar-standard-height));
-    padding-bottom: env(safe-area-inset-bottom);
-    padding-bottom: constant(safe-area-inset-bottom);
+    height: calc(100svh - var(--mat-toolbar-standard-height));
 
     .fab-container {
       @media (max-width: 575.98px) {