Try to fix mobile browser content cutoff using safe areas

codemonkey85 · Nov 22, 2024 · fa92f4a · fa92f4a
1 parent d449603
commit fa92f4a
Showing 1 changed file with 8 additions and 20 deletions.
diff --git a/Pkmds.Web/wwwroot/css/app.css b/Pkmds.Web/wwwroot/css/app.css
@@ -1,3 +1,11 @@
+body, html {
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-top: env(safe-area-inset-top);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    box-sizing: border-box;
+}
+
 pkm-sprite {
     object-fit: contain;
     align-self: center;
@@ -73,23 +81,3 @@ 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);
-    }
-}