[F] Fix vertical center on mobile devices

src/components/login/login.scss

@@ -28,6 +28,16 @@
 
     // Disable horizontal scroll
     overflow-x: hidden;
+
+    // Make it a table for vertical centering
+    display: table;
+}
+
+.login-vertical-center
+{
+    // Vertically center
+    display: table-cell;
+    vertical-align: middle;
 }
 
 // The user interacting panel
@@ -46,9 +56,6 @@
     box-shadow: 0 0 20px 0 white;
     border: 1px solid #DCDFE6;
 
-    // Vertical center
-    transform: translateY(50%);
-
     // Make it white
     background-color: white;
 

src/components/login/login.vue

@@ -1,5 +1,6 @@
 <template>
     <div id="login" class="login-overlay">
+        <div class="login-vertical-center">
             <div class="login-panel">
                 <img alt="Vue logo" src="../../assets/logo.png">
                 <h1>Veracross Analyzer</h1>
@@ -8,6 +9,7 @@
                 <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
             </div>
         </div>
+    </div>
 </template>
 
 <script src="./login.ts" lang="ts"></script>