...

Hybrid/Components/Layout/MainLayout.razor.css

@@ -6,6 +6,12 @@
 
 main {
     flex: 1;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+}
+
+.top-row {
+    padding-right: env(safe-area-inset-right, 0px);
 }
 
 .sidebar {

Hybrid/Components/Layout/NavMenu.razor.css

@@ -22,6 +22,7 @@
 
 .navbar-brand {
     font-size: 1.1rem;
+    padding-left: env(safe-area-inset-left, 0px);
 }
 
 .bi {

Hybrid/wwwroot/app.css

@@ -81,21 +81,11 @@ h1:focus {
 }
 
 .status-bar-safe-area {
-    display: none;
+    display: flex;
-}
+    position: sticky;
-
+    top: 0;
-@supports (-webkit-touch-callout: none) {
+    height: env(safe-area-inset-top, 0px);
-    .status-bar-safe-area {
+    background-color: #f7f7f7;
-        display: flex;
+    width: 100%;
-        position: sticky;
+    z-index: 1;
-        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);
-    }
 }