From 82c8ef1e4b418dc42e966718dd7e46845e2019e6 Mon Sep 17 00:00:00 2001
From: James Finch <LubricantJam@users.noreply.github.com>
Date: Thu, 27 Jan 2022 01:58:24 +0000
Subject: [PATCH] Added better mobile support for sign-up form.

---
 css/base.css   | 14 +++++++++++++-
 html/form.html | 12 ++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/css/base.css b/css/base.css
index 5f5182c..7e0520c 100644
--- a/css/base.css
+++ b/css/base.css
@@ -181,6 +181,18 @@ span.sm:not(.heading) {
     flex-direction: column;
 }
 
+.flex-form {
+    display: flex;
+    flex-direction: column;
+}
+
+@media screen and (min-width: 768px) {
+    .flex-form {
+        flex: 1;
+        margin: 0.5rem;
+    }
+}
+
 @media screen and (max-width: 400px) {
     .row {
         flex-direction: column;
@@ -308,7 +320,7 @@ sup.\~critical, .text-critical {
     padding-left: 0px;
 }
 
-.block { 
+.block {
     display: block;
 }
 
diff --git a/html/form.html b/html/form.html
index 54c7b1f..5d71c79 100644
--- a/html/form.html
+++ b/html/form.html
@@ -81,19 +81,19 @@
                     </div>
                 </div>
             </span>
-        </div>    
+        </div>
         <div id="notification-box"></div>
         <div class="page-container">
             <div class="card dark:~d_neutral @low">
                 <div class="row baseline">
-                    <span class="col heading">
+                    <span class="flex-form heading mr-5">
                         {{ if .passwordReset }}
                         {{ .strings.passwordReset }}
                         {{ else }}
                         {{ .strings.createAccountHeader }}
                         {{ end }}
                     </span>
-                    <span class="col subheading"> 
+                    <span class="flex-form subheading">
                         {{ if .passwordReset }}
                         {{ .strings.enterYourPassword }}
                         {{ else }}
@@ -102,7 +102,7 @@
                     </span>
                 </div>
                 <div class="row">
-                    <div class="col">
+                    <div class="flex-form">
                         {{ if .userExpiry }}
                         <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
                         {{ end }}
@@ -112,7 +112,7 @@
                                 {{ .strings.username }}
                                 <input type="text" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}">
                             </label>
-                            
+
                             <label class="label supra" for="create-email">{{ .strings.emailAddress }}</label>
                             <input type="email" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}">
                             {{ if .telegramEnabled }}
@@ -149,7 +149,7 @@
                             {{ end }}
                             <label class="label supra" for="create-password">{{ .strings.password }}</label>
                             <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}">
-                            
+
                             <label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label>
                             <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}">
                             <label>