diff --git a/assets/css/app.css b/assets/css/app.css
index 10b9def51..1e923c6d4 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -485,13 +485,13 @@ html.app .hide-in-app {
 	display: none !important;
 }
 
-.safe-area-inset {
+html.app .safe-area-inset {
 	padding: max(1rem, env(safe-area-inset-top)) env(safe-area-inset-right)
 		calc(0.5 * env(safe-area-inset-bottom)) env(safe-area-inset-left);
 	position: relative;
 }
 
-.safe-area-inset::before {
+html.app .safe-area-inset::before {
 	content: "";
 	display: block;
 	position: fixed;
@@ -504,7 +504,7 @@ html.app .hide-in-app {
 	background-color: var(--evcc-background);
 }
 
-.modal-dialog {
-	margin-top: max(var(--bs-modal-margin), env(safe-area-inset-top));
-	margin-bottom: max(var(--bs-modal-margin), env(safe-area-inset-bottom));
+html.app .modal-dialog {
+	margin-top: env(safe-area-inset-top);
+	margin-bottom: env(safe-area-inset-bottom);
 }
diff --git a/assets/js/components/Site.vue b/assets/js/components/Site.vue
index 3c250f6a5..274580687 100644
--- a/assets/js/components/Site.vue
+++ b/assets/js/components/Site.vue
@@ -157,6 +157,7 @@ export default {
 <style scoped>
 .site {
 	min-height: 100vh;
+	min-height: 100dvh;
 }
 .content-area {
 	flex-grow: 1;
diff --git a/assets/js/views/App.vue b/assets/js/views/App.vue
index 86944f22a..43c5e003f 100644
--- a/assets/js/views/App.vue
+++ b/assets/js/views/App.vue
@@ -147,5 +147,6 @@ export default {
 <style scoped>
 .app {
 	min-height: 100vh;
+	min-height: 100dvh;
 }
 </style>