From 0ad734262a64c6ba1ec9aed6893aa8db66d0dcbc Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 2 Jan 2024 10:06:13 +0100
Subject: [PATCH] Bugfix/improve tabs on ios (#2811)

* Improve tabs on iOS (Add to Home Screen)

* Update changelog
---
 CHANGELOG.md                           | 4 ++++
 apps/client/src/app/app.component.scss | 6 +++---
 apps/client/src/styles.scss            | 8 ++++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d0ec0935..bb13ba072 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the style of the _Top 3_ and _Bottom 3_ performers on the analysis page
 - Upgraded `Nx` from version `17.2.7` to `17.2.8`
 
+### Fixed
+
+- Improved the tabs on iOS (_Add to Home Screen_)
+
 ## 2.33.0 - 2023-12-31
 
 ### Added
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) {