fix(pwa): adds transparency to status bar

dvcol · dvcol · commit 94687af08928 · 2024-08-30T09:02:25.000+02:00
diff --git a/src/components/common/navbar/NavbarComponent.vue b/src/components/common/navbar/NavbarComponent.vue
@@ -131,7 +131,7 @@ nav {
   --navbar-text-color-hover-active: var(--white);
   --navbar-text-color-active: var(--white);
 
-  padding: 0 0.25rem;
+  padding: env(safe-area-inset-top) 0.25rem 0;
   font-size: 12px;
   text-align: center;
 
@@ -153,7 +153,7 @@ nav {
   .tabs {
     display: flex;
     justify-content: center;
-    min-height: 2.75rem;
+    min-height: layout.$header-navbar-height;
 
     :deep(.n-tabs-capsule) {
       height: calc(#{layout.$header-navbar-height} - 0.75rem) !important;
diff --git a/src/index.html b/src/index.html
@@ -14,6 +14,10 @@
     <link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#80000a" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   </head>
   <body>
     <wc-trakt-extension>
