...

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