Bugfix/improve tabs on ios (#2811)

* Improve tabs on iOS (Add to Home Screen)

* Update changelog

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

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));
   }
 }
 

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));
+    height: calc(100svh - var(--mat-toolbar-standard-height));
-    padding-bottom: env(safe-area-inset-bottom);
-    padding-bottom: constant(safe-area-inset-bottom);
 
     .fab-container {
       @media (max-width: 575.98px) {