Attempt to fix safe area for mobile

codemonkey85 · Nov 22, 2024 · 783aaec · 783aaec
1 parent 58dc038
commit 783aaec
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/Pkmds.Web/wwwroot/css/app.css b/Pkmds.Web/wwwroot/css/app.css
@@ -73,3 +73,23 @@ item-sprite {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
+
+.status-bar-safe-area {
+    display: none;
+}
+
+@supports (-webkit-touch-callout: none) {
+    .status-bar-safe-area {
+        display: flex;
+        position: sticky;
+        top: 0;
+        height: env(safe-area-inset-top);
+        background-color: #f7f7f7;
+        width: 100%;
+        z-index: 1;
+    }
+
+    .flex-column, .navbar-brand {
+        padding-left: env(safe-area-inset-left);
+    }
+}
diff --git a/Pkmds.Web/wwwroot/index.html b/Pkmds.Web/wwwroot/index.html
@@ -20,6 +20,8 @@
 
 <body>
 
+    <div class="status-bar-safe-area"></div>
+
     <div id="app">
         <svg class="loading-progress">
             <circle r="40%"
@@ -50,6 +52,7 @@
     <!--prevent autostarting-->
     <script src="_framework/blazor.webassembly.js" autostart="false"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
+    <!--<script>navigator.serviceWorker.register('service-worker.js', { updateViaCache: 'none' });</script>-->
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
     <script src="js/lib/crypto-js/crypto-js.min.js"></script>