From 33604ac0dc5ff3f0a8b826d294d32f552844f9ef Mon Sep 17 00:00:00 2001
From: glyph <glyph@mycelial.technology>
Date: Wed, 2 Feb 2022 14:49:14 +0200
Subject: [PATCH] change form width for better mobile styling

---
 peach-web/static/css/peachcloud.css           | 15 ++++++++++
 .../settings/admin/change_password.html.tera  | 30 +++++++++----------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/peach-web/static/css/peachcloud.css b/peach-web/static/css/peachcloud.css
index 93936d4..99ec9d2 100644
--- a/peach-web/static/css/peachcloud.css
+++ b/peach-web/static/css/peachcloud.css
@@ -15,6 +15,7 @@
  * - HTML
  * - FLASH MESSAGE
  * - FONTS
+ * - FORMS
  * - ICONS
  * - INPUTS
  * - LABELS
@@ -596,6 +597,20 @@ html {
     color: var(--danger);
 }
 
+/*
+ * FORMS
+ */
+
+form {
+    width: 90%;
+}
+
+@media only screen and (min-width: 600px) {
+    form {
+        width: 100%;
+    }
+}
+
 /*
  * ICONS
  */
diff --git a/peach-web/templates/settings/admin/change_password.html.tera b/peach-web/templates/settings/admin/change_password.html.tera
index fe30e82..604fe46 100644
--- a/peach-web/templates/settings/admin/change_password.html.tera
+++ b/peach-web/templates/settings/admin/change_password.html.tera
@@ -2,21 +2,19 @@
 {%- block card %}
       <!-- CHANGE PASSWORD FORM -->
       <div class="card center">
-        <div class="form-container">
-          <form id="changePassword" action="/settings/admin/change_password" method="post">
-            <!-- input for current password -->
-            <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
-            <!-- input for new password -->
-            <input id="newPassword" class="center input" name="new_password1" type="password" placeholder="New password" title="New password">
-            <!-- input for duplicate new password -->
-            <input id="newPasswordDuplicate" class="center input" name="new_password2" type="password" placeholder="Re-enter new password" title="New password duplicate">
-            <div id="buttonDiv">
-              <input id="savePassword" class="button button-primary center" title="Add" type="submit" value="Save">
-              <a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
-            </div>
-          </form>
-          <!-- FLASH MESSAGE -->
-          {% include "snippets/flash_message" %}
-        </div>
+        <form id="changePassword" action="/settings/admin/change_password" method="post">
+          <!-- input for current password -->
+          <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
+          <!-- input for new password -->
+          <input id="newPassword" class="center input" name="new_password1" type="password" placeholder="New password" title="New password">
+          <!-- input for duplicate new password -->
+          <input id="newPasswordDuplicate" class="center input" name="new_password2" type="password" placeholder="Re-enter new password" title="New password duplicate">
+          <div id="buttonDiv">
+            <input id="savePassword" class="button button-primary center" title="Add" type="submit" value="Save">
+            <a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
+          </div>
+        </form>
+        <!-- FLASH MESSAGE -->
+        {% include "snippets/flash_message" %}
       </div>
 {%- endblock card -%}