fix: Login screen not vertically centered on mobile (#4052)

app/scenes/Login/index.tsx

@@ -243,7 +243,7 @@ const CheckEmailIcon = styled(EmailIcon)`
 
 const Background = styled(Fade)`
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   background: ${(props) => props.theme.background};
   display: flex;
 `;

app/styles/globals.ts

@@ -12,7 +12,7 @@ export default createGlobalStyle`
   html,
   body {
     width: 100%;
-    min-height: 100vh;
+    height: 100%;
     margin: 0;
     padding: 0;
     print-color-adjust: exact;
@@ -39,6 +39,13 @@ export default createGlobalStyle`
     text-rendering: optimizeLegibility;
   }
 
+  @media (min-width: ${breakpoints.tablet}px) {
+    html,
+    body {
+      min-height: 100vh;
+    }
+  }
+
   @media (min-width: ${breakpoints.tablet}px) and (display-mode: standalone) {
     body:after {
       content: "";

server/static/index.html

@@ -47,7 +47,7 @@
 
       #root {
         flex: 1;
-        min-height: 100vh;
+        min-height: 100%;
         width: 100%;
       }
     </style>