From 3434bf099cb6ff0982c9adac261e7aed00bf5280 Mon Sep 17 00:00:00 2001
From: William Brawner <me@wbrawner.com>
Date: Sun, 7 Jul 2024 10:54:49 -0600
Subject: [PATCH] Fix some styling issues for forms

---
 web/src/main/resources/static/style.css       | 15 ++++++-
 .../resources/templates/budget-form.mustache  | 28 +++++++------
 .../main/resources/templates/login.mustache   | 34 ++++++++--------
 .../resources/templates/register.mustache     | 40 ++++++++++---------
 4 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/web/src/main/resources/static/style.css b/web/src/main/resources/static/style.css
index 43f2b7b..450a87e 100644
--- a/web/src/main/resources/static/style.css
+++ b/web/src/main/resources/static/style.css
@@ -1,4 +1,5 @@
 * {
+    box-sizing: border-box;
     transition: 0.25s ease;
 }
 
@@ -129,6 +130,7 @@ header.row {
     font-weight: bold;
     padding: var(--input-padding);
     text-decoration: none;
+    text-align: center;
 }
 
 .flex-full-width {
@@ -261,11 +263,22 @@ a {
 }
 
 @media all and (max-width: 400px) {
-    button {
+    .button {
         width: 100%;
     }
 
+    .center {
+        padding: 10px;
+    }
+
     .flex-full-width {
         flex-direction: column;
+        padding: 5px;
+        width: 100%;
+    }
+
+    .flex-full-width .button {
+        flex-direction: column;
+        margin: 5px;
     }
 }
diff --git a/web/src/main/resources/templates/budget-form.mustache b/web/src/main/resources/templates/budget-form.mustache
index 5dc031c..40df6c4 100644
--- a/web/src/main/resources/templates/budget-form.mustache
+++ b/web/src/main/resources/templates/budget-form.mustache
@@ -1,17 +1,19 @@
 {{> partials/head }}
 <div id="app">
-    <h1>{{title}}</h1>
-    <div class="center">
-        {{#error }}
-            <p class="error">{{error}}</p>
-        {{/error}}
-        <form method="post">
-            <label for="name">Name</label>
-            <input id="name" type="text" name="name" value="{{ budget.name }}"/>
-            <label for="description">Description</label>
-            <textarea id="description" name="description">{{ budget.description }}</textarea>
-            <input id="submit" type="submit" class="button button-primary" value="Save"/>
-        </form>
-    </div>
+    <main>
+        <h1>{{title}}</h1>
+        <div class="center">
+            {{#error }}
+                <p class="error">{{error}}</p>
+            {{/error}}
+            <form method="post">
+                <label for="name">Name</label>
+                <input id="name" type="text" name="name" value="{{ budget.name }}"/>
+                <label for="description">Description</label>
+                <textarea id="description" name="description">{{ budget.description }}</textarea>
+                <input id="submit" type="submit" class="button button-primary" value="Save"/>
+            </form>
+        </div>
+    </main>
 </div>
 {{>partials/foot}}
diff --git a/web/src/main/resources/templates/login.mustache b/web/src/main/resources/templates/login.mustache
index 4a2bc6e..28a9d0d 100644
--- a/web/src/main/resources/templates/login.mustache
+++ b/web/src/main/resources/templates/login.mustache
@@ -1,20 +1,22 @@
 {{> partials/head }}
 <div id="app">
-    <h1>{{title}}</h1>
-    <div class="center">
-        <div class="logo"></div>
-        {{#error }}
-            <p class="error">{{error}}</p>
-        {{/error}}
-        <form action="/login" method="post">
-            <label for="username">Username</label>
-            <input id="username" type="text" name="username" value="{{ username }}"/>
-            <label for="password">Password</label>
-            <input id="password" type="password" name="password"/>
-            <input id="submit" type="submit" class="button button-primary" value="Login"/>
-        </form>
-        <a href="/resetpassword" style="padding: var(--input-padding)">Forgot your password?</a>
-        <a href="/register" style="padding: var(--input-padding)">Create an account</a>
-    </div>
+    <main>
+        <h1>{{title}}</h1>
+        <div class="center">
+            <div class="logo"></div>
+            {{#error }}
+                <p class="error">{{error}}</p>
+            {{/error}}
+            <form action="/login" method="post">
+                <label for="username">Username</label>
+                <input id="username" type="text" name="username" value="{{ username }}"/>
+                <label for="password">Password</label>
+                <input id="password" type="password" name="password"/>
+                <input id="submit" type="submit" class="button button-primary" value="Login"/>
+            </form>
+            <a href="/resetpassword" style="padding: var(--input-padding)">Forgot your password?</a>
+            <a href="/register" style="padding: var(--input-padding)">Create an account</a>
+        </div>
+    </main>
 </div>
 {{>partials/foot}}
\ No newline at end of file
diff --git a/web/src/main/resources/templates/register.mustache b/web/src/main/resources/templates/register.mustache
index cec4e95..936a77c 100644
--- a/web/src/main/resources/templates/register.mustache
+++ b/web/src/main/resources/templates/register.mustache
@@ -1,23 +1,25 @@
 {{> partials/head }}
 <div id="app">
-    <h1>{{title}}</h1>
-    <div class="center">
-        <div class="logo"></div>
-        {{#error }}
-            <p class="error">{{error}}</p>
-        {{/error}}
-        <form action="/register" method="post">
-            <label for="username">Username</label>
-            <input id="username" type="text" name="username" value="{{ username }}"/>
-            <label for="email">Email</label>
-            <input id="email" type="email" name="email" value="{{ email }}"/>
-            <label for="password">Password</label>
-            <input id="password" type="password" name="password"/>
-            <label for="confirm-password">Confirm Password</label>
-            <input id="confirm-password" type="password" name="confirmPassword"/>
-            <input type="submit" class="button button-primary" value="Login"/>
-        </form>
-        <a href="/login" style="padding: var(--input-padding)">Login</a>
-    </div>
+    <main>
+        <h1>{{title}}</h1>
+        <div class="center">
+            <div class="logo"></div>
+            {{#error }}
+                <p class="error">{{error}}</p>
+            {{/error}}
+            <form action="/register" method="post">
+                <label for="username">Username</label>
+                <input id="username" type="text" name="username" value="{{ username }}"/>
+                <label for="email">Email</label>
+                <input id="email" type="email" name="email" value="{{ email }}"/>
+                <label for="password">Password</label>
+                <input id="password" type="password" name="password"/>
+                <label for="confirm-password">Confirm Password</label>
+                <input id="confirm-password" type="password" name="confirmPassword"/>
+                <input type="submit" class="button button-primary" value="Register"/>
+            </form>
+            <a href="/login" style="padding: var(--input-padding)">Login</a>
+        </div>
+    </main>
 </div>
 {{>partials/foot}}
\ No newline at end of file
-- 
2.45.2