From fad03f94f91f4613fae5988c19f285d5a82035ae Mon Sep 17 00:00:00 2001
From: Connor Johnstone <connor.johnstone@arcfield.com>
Date: Sat, 13 Sep 2025 18:15:47 -0400
Subject: [PATCH] Improve login form layout and accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move remember checkboxes inline with inputs for better space utilization
- Implement proper tab order: server → username → password → checkboxes
- Increase form width from 400px to 500px to accommodate horizontal layout
- Make checkbox labels more concise ("Remember" instead of full text)
- Enhance checkbox styling with vertical label placement and larger size
- Reduce form label bottom margin for tighter spacing
- Ensure consistent input widths across all form fields

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/login.rs | 69 ++++++++++++++++++--------------
 frontend/styles.css              | 32 +++++++++++----
 2 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/login.rs b/frontend/src/components/login.rs
index 34015ca..de35299 100644
--- a/frontend/src/components/login.rs
+++ b/frontend/src/components/login.rs
@@ -164,45 +164,53 @@ pub fn Login(props: &LoginProps) -> Html {
                 <form onsubmit={on_submit}>
                     <div class="form-group">
                         <label for="server_url">{"CalDAV Server URL"}</label>
-                        <input
-                            ref={server_url_ref}
-                            type="text"
-                            id="server_url"
-                            placeholder="https://your-caldav-server.com/dav/"
-                            value={(*server_url).clone()}
-                            onchange={on_server_url_change}
-                            disabled={*is_loading}
-                        />
-                        <div class="remember-checkbox">
+                        <div class="input-with-checkbox">
                             <input
-                                type="checkbox"
-                                id="remember_server"
-                                checked={*remember_server}
-                                onchange={on_remember_server_change}
+                                ref={server_url_ref}
+                                type="text"
+                                id="server_url"
+                                placeholder="https://your-caldav-server.com/dav/"
+                                value={(*server_url).clone()}
+                                onchange={on_server_url_change}
+                                disabled={*is_loading}
+                                tabindex="1"
                             />
-                            <label for="remember_server">{"Remember server"}</label>
+                            <div class="remember-checkbox">
+                                <label for="remember_server">{"Remember"}</label>
+                                <input
+                                    type="checkbox"
+                                    id="remember_server"
+                                    checked={*remember_server}
+                                    onchange={on_remember_server_change}
+                                    tabindex="4"
+                                />
+                            </div>
                         </div>
                     </div>
 
                     <div class="form-group">
                         <label for="username">{"Username"}</label>
-                        <input
-                            ref={username_ref}
-                            type="text"
-                            id="username"
-                            placeholder="Enter your username"
-                            value={(*username).clone()}
-                            onchange={on_username_change}
-                            disabled={*is_loading}
-                        />
-                        <div class="remember-checkbox">
+                        <div class="input-with-checkbox">
                             <input
-                                type="checkbox"
-                                id="remember_username"
-                                checked={*remember_username}
-                                onchange={on_remember_username_change}
+                                ref={username_ref}
+                                type="text"
+                                id="username"
+                                placeholder="Enter your username"
+                                value={(*username).clone()}
+                                onchange={on_username_change}
+                                disabled={*is_loading}
+                                tabindex="2"
                             />
-                            <label for="remember_username">{"Remember username"}</label>
+                            <div class="remember-checkbox">
+                                <label for="remember_username">{"Remember"}</label>
+                                <input
+                                    type="checkbox"
+                                    id="remember_username"
+                                    checked={*remember_username}
+                                    onchange={on_remember_username_change}
+                                    tabindex="5"
+                                />
+                            </div>
                         </div>
                     </div>
 
@@ -216,6 +224,7 @@ pub fn Login(props: &LoginProps) -> Html {
                             value={(*password).clone()}
                             onchange={on_password_change}
                             disabled={*is_loading}
+                            tabindex="3"
                         />
                     </div>
 
diff --git a/frontend/styles.css b/frontend/styles.css
index 28dfed8..bf825c5 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -452,7 +452,7 @@ body {
     border-radius: var(--border-radius-medium);
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     width: 100%;
-    max-width: 400px;
+    max-width: 500px;
 }
 
 .login-form h2, .register-form h2 {
@@ -492,24 +492,42 @@ body {
     cursor: not-allowed;
 }
 
-.remember-checkbox {
+.input-with-checkbox {
     display: flex;
     align-items: center;
-    gap: 0.375rem;
-    margin-top: 0.375rem;
+    gap: 1rem;
+}
+
+.input-with-checkbox input[type="text"],
+.input-with-checkbox input[type="password"] {
+    flex: 1;
+    min-width: 0;
+}
+
+.form-group input {
+    width: 100%;
+}
+
+.remember-checkbox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.1rem;
     opacity: 0.7;
+    white-space: nowrap;
+    min-width: 80px;
 }
 
 .remember-checkbox input[type="checkbox"] {
     width: auto;
     margin: 0;
     cursor: pointer;
-    transform: scale(0.85);
+    transform: scale(1.1);
 }
 
 .remember-checkbox label {
     margin: 0;
-    font-size: 0.75rem;
+    font-size: 0.55rem;
     color: #888;
     cursor: pointer;
     user-select: none;
@@ -1826,7 +1844,7 @@ body {
 
 .form-group label {
     display: block;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.4rem;
     color: #374151;
     font-weight: 600;
     font-size: 0.95rem;