From b04935ada91d8372219ca21062144c5f9466748f Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Sat, 5 Sep 2026 00:05:06 +0100
Subject: [PATCH] Make the change-email form a single line, like the rename
 forms

Switches from the stacked .form pattern to .field-row: the input and
its submit button now sit side by side, the button sized to fit its
text rather than stretched full width -- matching the project rename
and add-status forms.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/views/ProfileView.vue | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/web/src/views/ProfileView.vue b/web/src/views/ProfileView.vue
index 529d662..993ad55 100644
--- a/web/src/views/ProfileView.vue
+++ b/web/src/views/ProfileView.vue
@@ -140,24 +140,27 @@ async function onRemovePasskey(passkey: Passkey) {
         We'll email a confirmation link to the new address; the change only
         takes effect once you open it.
       </p>
-      <form class="form" @submit.prevent="onChangeEmail">
-        <label>
-          <span>New email</span>
-          <input v-model="newEmail" class="field" type="email" maxlength="255" required />
-          <small v-if="changeError?.fieldError('email')" class="field-error">
-            {{ changeError.fieldError('email') }}
-          </small>
-        </label>
-
-        <p v-if="changeError && Object.keys(changeError.details).length === 0" class="form-error">
-          {{ changeError.message }}
-        </p>
-        <p v-if="changeMessage" class="muted">{{ changeMessage }}</p>
-
+      <form class="field-row" @submit.prevent="onChangeEmail">
+        <input
+          v-model="newEmail"
+          class="field field--compact"
+          type="email"
+          maxlength="255"
+          required
+          placeholder="New email"
+          aria-label="New email"
+        />
         <button type="submit" :disabled="changing || cooldown > 0">
           {{ changing ? 'Sending…' : cooldown > 0 ? `Wait ${cooldown}s` : 'Send confirmation link' }}
         </button>
       </form>
+      <p v-if="changeError?.fieldError('email')" class="field-error">
+        {{ changeError.fieldError('email') }}
+      </p>
+      <p v-if="changeError && Object.keys(changeError.details).length === 0" class="form-error">
+        {{ changeError.message }}
+      </p>
+      <p v-if="changeMessage" class="muted">{{ changeMessage }}</p>
     </section>
 
     <section>