From b32976043f5ecd3273cea4be1c98fbd31f0f4770 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 17 Jun 2020 09:12:41 +0200
Subject: [PATCH] Fix login form on mobile

---
 src/components/user/Login.vue |  2 +-
 src/styles/theme/content.scss | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/user/Login.vue b/src/components/user/Login.vue
index 946c0b6a..6d9a0497 100644
--- a/src/components/user/Login.vue
+++ b/src/components/user/Login.vue
@@ -49,7 +49,7 @@
 					</div>
 				</div>
 
-				<div class="field is-grouped">
+				<div class="field is-grouped login-buttons">
 					<div class="control is-expanded">
 						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Login
 						</button>
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index a43e47e4..22274d5e 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -22,12 +22,18 @@
 }
 
 .noauth-container {
-  width: 450px;
+  max-width: 450px;
+  width: 100%;
   margin: 0 auto;
-  padding: 1rem 0;
+  padding: 1rem;
 
-  @media screen and (max-width: calc(450px + 2rem)) {
-    width: 100%;
-    padding: 1rem;
+  @media screen and (max-width: 450px) {
+    .login-buttons {
+      flex-direction: column;
+
+      .control:first-child {
+        margin-bottom: 1rem;
+      }
+    }
   }
 }