fix(pwa): update header offset

Author: dvcol

src/components/AppComponent.vue

@@ -183,15 +183,15 @@ const onBack = () => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: calc(var(--full-height) - #{layout.$header-navbar-height});
-    margin-top: layout.$header-navbar-height;
+    min-height: layout.$main-content-height;
+    margin-top: layout.$safe-navbar-height;
 
     &.full-height {
       min-height: var(--full-height);
       margin-top: 0;
 
       :deep(.loading-container) {
-        padding-top: layout.$header-navbar-height;
+        padding-top: layout.$safe-navbar-height;
       }
     }
   }
@@ -205,7 +205,7 @@ const onBack = () => {
 
   .panel {
     position: relative;
-    max-height: calc(100% - #{layout.$header-navbar-height});
+    max-height: calc(100% - #{layout.$safe-navbar-height});
     overflow: auto;
 
     &-header {

src/components/common/list/ListScroll.vue

@@ -228,8 +228,8 @@ const isEmpty = computed(() => !items.value.length && !loading.value);
 @include animation.fade-in;
 
 .list-scroll {
-  height: calc(var(--full-height) - 8px);
-  margin-top: -#{layout.$header-navbar-height};
+  height: calc(var(--full-height-absolute) - 8px);
+  margin-top: calc(0% - #{layout.$safe-navbar-height});
   margin-bottom: 8px;
 
   .load-more {

src/components/container/ContainerComponent.ce.vue

@@ -135,7 +135,7 @@ onBeforeMount(() => addCustomProgressProperty());
     layout.$navbar-transition-delay-visible}
   );
 
-  top: layout.$header-navbar-height;
+  top: layout.$safe-navbar-height;
 
   &.drawer-visible {
     top: layout.$header-open-drawer-height;
@@ -156,7 +156,7 @@ onBeforeMount(() => addCustomProgressProperty());
     layout.$navbar-transition-delay-visible}
   );
 
-  top: calc(#{layout.$header-navbar-height} + 12px);
+  top: calc(#{layout.$safe-navbar-height} + 12px);
 
   &.drawer-visible {
     top: calc(#{layout.$header-open-drawer-height} + 12px);

src/components/views/about/AboutComponent.vue

@@ -127,7 +127,7 @@ const openRelease = (url?: string) => {
 
 .container {
   width: 100%;
-  height: calc(var(--full-height) - #{layout.$header-navbar-height});
+  height: layout.$main-content-height;
   background: transparent;
 
   .card {

src/components/views/settings/SettingsComponent.vue

@@ -136,14 +136,14 @@ onDeactivated(() => {
 .container {
   width: 100%;
   height: var(--full-height);
-  margin-top: -#{layout.$header-navbar-height};
+  margin-top: calc(0% - #{layout.$safe-navbar-height});
   background: transparent;
 
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
 
     z-index: var(--length);
-    scroll-margin-top: calc(#{layout.$header-navbar-height} + 1rem);
+    scroll-margin-top: calc(#{layout.$safe-navbar-height} + 1rem);
 
     &:not(:last-child) {
       z-index: calc(var(--length) - var(--index));
@@ -164,7 +164,7 @@ onDeactivated(() => {
   .menu {
     @include mixin.hover-background;
 
-    height: calc(var(--full-height) - #{layout.$header-navbar-height});
+    height: layout.$main-content-height;
     padding: 0.5rem;
   }
 
@@ -175,7 +175,7 @@ onDeactivated(() => {
 
   .menu,
   .content .card:first-child {
-    margin-top: layout.$header-navbar-height;
+    margin-top: layout.$safe-navbar-height;
   }
 }
 </style>

src/styles/base.scss

@@ -2,6 +2,7 @@
 :host {
   /* height */
   --full-height: 100dvh;
+  --full-height-absolute: 100vh;
   --half-height: 50dvh;
   --height-40-dvh: 40dvh;
   --height-70-dvh: 70dvh;

src/styles/layout.scss

@@ -1,6 +1,17 @@
+// Pwa safe areas
+$safe-area-inset-top: env(safe-area-inset-top);
+$safe-area-inset-right: env(safe-area-inset-right);
+$safe-area-inset-bottom: env(safe-area-inset-bottom);
+$safe-area-inset-left: env(safe-area-inset-left);
+
+// Element heights
 $header-navbar-height: 2.75rem;
+$safe-navbar-height: calc(#{$header-navbar-height} + #{$safe-area-inset-top});
 $header-drawer-height: 3.5rem;
-$header-open-drawer-height: calc(#{$header-navbar-height} + #{$header-drawer-height});
+$header-open-drawer-height: calc(#{$safe-navbar-height} + #{$header-drawer-height});
+$main-content-height: calc(var(--full-height) - #{$safe-navbar-height});
+
+// Navbar transition
 $navbar-transition: 0.5s var(--n-bezier);
 $navbar-transition-visible: 0.25s var(--n-bezier);
 $navbar-transition-delay: 0.5s;