viewport height adjustments for mobile browsers

src/global-styles/custom.scss

@@ -8,6 +8,15 @@ $dark-mode-card-bg: #2A3244;
     background: $dark-mode-card-bg;
 }
 
+.vh100 {
+    min-height: 100vh;
+    min-height: -webkit-fill-available;
+    min-height: -moz-available;
+    min-height: available; // not sure if exist in any browser
+    min-height: -webkit-stretch; // not sure if exist in any browser
+    min-height: -moz-stretch; // not sure if exist in any browser
+    min-height: stretch;
+}
 
 // Overrides
 .btn, button {

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="d-flex flex-column align-items-center justify-content-center min-vh-100 p-2">
+    <div class="d-flex flex-column align-items-center justify-content-center vh100 p-2">
       <img alt="Umbrel" src="@/assets/logo.svg" class="mb-2 logo" />
       <h1
         :class="[isDarkMode ? 'text-white' : '', 'text-center mb-2']"

src/views/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="d-flex flex-column align-items-center justify-content-center min-vh-100 p-2">
+    <div class="d-flex flex-column align-items-center justify-content-center vh100 p-2">
       <img alt="Umbrel" src="@/assets/logo.svg" class="mb-2 logo" />
       <h1 class="text-center mb-2">welcome back</h1>
       <p class="text-muted w-75 text-center">Enter the password to login to your Umbrel</p>