From 9113fb90eee862e3187d947d45f5e81033a39c6e Mon Sep 17 00:00:00 2001
From: ahjephson <16685186+ahjephson@users.noreply.github.com>
Date: Mon, 20 Oct 2025 18:44:18 +0100
Subject: [PATCH] Fix statusbar on ios

---
 Lantean.QBTMud/wwwroot/css/app.css | 54 +++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/Lantean.QBTMud/wwwroot/css/app.css b/Lantean.QBTMud/wwwroot/css/app.css
index 8a024bf..dcb5422 100644
--- a/Lantean.QBTMud/wwwroot/css/app.css
+++ b/Lantean.QBTMud/wwwroot/css/app.css
@@ -1,4 +1,4 @@
-#blazor-error-ui {
+#blazor-error-ui {
     background: lightyellow;
     bottom: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
@@ -65,16 +65,11 @@ code {
 }
 
 .mud-appbar.mud-appbar-fixed-bottom {
-    height: var(--app-status-bar-height);
-}
-
-.mud-main-content {
-    padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
-    box-sizing: border-box;
+    height: calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
 }
 
 .mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
-    height: calc(100% - var(--mud-appbar-height) - var(--app-status-bar-height));
+    height: calc(100% - var(--mud-appbar-height) - (var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px)));
 }
 
 .w-100 {
@@ -301,7 +296,13 @@ td .folder-button {
     --app-status-bar-height: 35px;
 }
 
-@supports (height: 100dvh) {
+@supports (height: 100svh) {
+    :root {
+        --app-viewport-height: 100svh;
+    }
+}
+
+@supports ((height: 100dvh) and (not (height: 100svh))) {
     :root {
         --app-viewport-height: 100dvh;
     }
@@ -328,8 +329,8 @@ body {
 .app-shell {
     display: flex;
     flex-direction: column;
-    height: 100%;
-    min-height: 0;
+    height: var(--app-viewport-height);
+    min-height: var(--app-viewport-height);
     overflow: hidden;
 }
 
@@ -350,19 +351,42 @@ body {
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
-    padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
+    padding: var(--mud-appbar-height) 0 calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
     box-sizing: border-box;
 }
 
 .app-shell__status-bar.mud-appbar {
-    flex: 0 0 var(--app-status-bar-height);
-    height: var(--app-status-bar-height);
+    flex: 0 0 calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
+    height: calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
     width: 100%;
     background-color: var(--mud-palette-dark-lighten);
     align-items: center;
     justify-content: flex-start;
+    box-sizing: border-box;
 }
 
 .app-shell__status-bar .mud-toolbar {
     width: 100%;
-}
\ No newline at end of file
+    height: 100%;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    background-color: inherit;
+    box-sizing: border-box;
+}
+
+@supports (-webkit-touch-callout: none) {
+    :root {
+        --app-viewport-height: -webkit-fill-available;
+    }
+
+    html,
+    body {
+        height: -webkit-fill-available;
+        min-height: -webkit-fill-available;
+    }
+
+    .app-shell {
+        height: -webkit-fill-available;
+        min-height: -webkit-fill-available;
+    }
+}
+