[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,11 +1,13 @@
 <template>
     <div id="login" class="login-overlay">
-        <div class="login-panel">
+        <div class="login-vertical-center">
-            <img alt="Vue logo" src="../../assets/logo.png">
+            <div class="login-panel">
-            <h1>Veracross Analyzer</h1>
+                <img alt="Vue logo" src="../../assets/logo.png">
-            <el-input v-model="username" placeholder="School Username"></el-input>
+                <h1>Veracross Analyzer</h1>
-            <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
+                <el-input v-model="username" placeholder="School Username"></el-input>
-            <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+                <el-input v-model="password" placeholder="Veracross Password" show-password=""></el-input>
+                <el-button plain type="primary" @click="onLoginClick" :loading="loading">Login</el-button>
+            </div>
         </div>
     </div>
 </template>