fix(mobile): fix floating offsets

Author: dvcol

src/components/AppComponent.vue

@@ -247,7 +247,7 @@ const onBack = () => {
 
   &.floating {
     header {
-      top: 1rem;
+      top: layout.$floating-navbar-offset;
       left: calc(50% - var(--max-header-width) / 2);
       width: var(--max-header-width);
     }

src/components/common/navbar/NavbarComponent.vue

@@ -251,7 +251,7 @@ nav {
 
   &.reverse {
     flex-direction: column-reverse;
-    padding: 0 0.25rem env(safe-area-inset-bottom);
+    padding: 0 0.25rem;
   }
 
   &.floating {

src/components/views/settings/SettingsComponent.vue

@@ -176,12 +176,10 @@ onDeactivated(() => {
 
 .container {
   width: 100%;
-  height: layout.$safe-full-height;
+  height: var(--full-height);
   margin-top: calc(0% - #{layout.$safe-navbar-height});
   background: transparent;
-  transition:
-    height 0.5s var(--n-bezier),
-    margin-top 0.5s var(--n-bezier);
+  transition: margin-top 0.5s var(--n-bezier);
 
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
@@ -213,12 +211,10 @@ onDeactivated(() => {
   .menu {
     @include mixin.hover-background;
 
-    height: layout.$safe-content-height;
     padding: 0.5rem;
   }
 
   .content {
-    height: layout.$safe-full-height;
     background: transparent;
     transition:
       height 0.5s var(--n-bezier),
@@ -231,17 +227,14 @@ onDeactivated(() => {
   }
 
   &.floating {
-    height: layout.$floating-content-height;
     margin-top: calc(0% - #{layout.$safe-area-inset-top});
 
-    .content {
-      height: calc(#{layout.$floating-content-height} - 0.75rem);
-      margin-top: calc(0.75rem + #{layout.$safe-area-inset-top});
+    .content .card:first-child {
+      margin-top: layout.$floating-navbar-height;
     }
 
     .menu {
-      height: layout.$floating-content-height;
-      margin-top: layout.$safe-area-inset-top;
+      margin-top: 0;
       padding-top: 1.5rem;
     }
   }

src/styles/layout.scss

@@ -13,8 +13,8 @@ $safe-content-height: calc(var(--full-height) - #{$safe-navbar-height});
 $safe-full-height: calc(var(--full-height) - #{$safe-area-inset-top});
 
 // floating navbar
-$floating-navbar-offset: 1rem;
-$floating-navbar-height: calc(#{$floating-navbar-offset} + #{$safe-navbar-height});
+$floating-navbar-offset: calc(1rem + #{$safe-area-inset-top / 3});
+$floating-navbar-height: calc(#{$floating-navbar-offset} + #{$header-navbar-height});
 $floating-open-drawer-height: calc(#{$floating-navbar-height} + #{$header-drawer-height});
 $floating-content-height: $safe-full-height;