fix pwa layout

src/@layouts/styles/_default-layout.scss

@@ -14,12 +14,13 @@ body,
   min-height: 100%;
 }
 
-.layout-vertical-nav, .layout-navbar {
+.layout-vertical-nav {
   padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
-.layout-vertical-nav {
-  padding-bottom: env(safe-area-inset-bottom);
+.navbar-content-container {
+  padding-top: env(safe-area-inset-top);
 }
 
 .layout-page-content {
@@ -29,6 +30,7 @@ body,
 
   // TODO: Use grid gutter variable here
   padding-block: 0.5rem;
+  padding-top: calc(env(safe-area-inset-top) + 70px);
 }
 
 .layout-footer {

src/@layouts/styles/_placeholders.scss

@@ -17,8 +17,9 @@
 }
 
 // ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately
-%layout-navbar-sticky {
-  position: sticky;
+%layout-navbar-fixed {
+  position: fixed;
+  top: 0;
   inset-block-start: 0;
 
   // will-change: transform;