From c9156ae3992c57ff75353c7600ec3bd226d53d58 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 4 Sep 2022 09:14:32 +0200
Subject: [PATCH] fix: Login screen not vertically centered on mobile (#4052)

---
 app/scenes/Login/index.tsx | 2 +-
 app/styles/globals.ts      | 9 ++++++++-
 server/static/index.html   | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/scenes/Login/index.tsx b/app/scenes/Login/index.tsx
index 3c8b5ad08..e08e120cd 100644
--- a/app/scenes/Login/index.tsx
+++ b/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;
 `;
diff --git a/app/styles/globals.ts b/app/styles/globals.ts
index 0fdf6cbec..464ea35ff 100644
--- a/app/styles/globals.ts
+++ b/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: "";
diff --git a/server/static/index.html b/server/static/index.html
index bd42e6512..0aff0ced8 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -47,7 +47,7 @@
 
       #root {
         flex: 1;
-        min-height: 100vh;
+        min-height: 100%;
         width: 100%;
       }
     </style>