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>
This commit is contained in:
2026-09-05 00:05:06 +01:00
co-authored by Claude Sonnet 5
parent 4947ebdf38
commit b04935ada9
+17 -14
View File
@@ -140,24 +140,27 @@ async function onRemovePasskey(passkey: Passkey) {
We'll email a confirmation link to the new address; the change only We'll email a confirmation link to the new address; the change only
takes effect once you open it. takes effect once you open it.
</p> </p>
<form class="form" @submit.prevent="onChangeEmail"> <form class="field-row" @submit.prevent="onChangeEmail">
<label> <input
<span>New email</span> v-model="newEmail"
<input v-model="newEmail" class="field" type="email" maxlength="255" required /> class="field field--compact"
<small v-if="changeError?.fieldError('email')" class="field-error"> type="email"
{{ changeError.fieldError('email') }} maxlength="255"
</small> required
</label> placeholder="New email"
aria-label="New email"
<p v-if="changeError && Object.keys(changeError.details).length === 0" class="form-error"> />
{{ changeError.message }}
</p>
<p v-if="changeMessage" class="muted">{{ changeMessage }}</p>
<button type="submit" :disabled="changing || cooldown > 0"> <button type="submit" :disabled="changing || cooldown > 0">
{{ changing ? 'Sending' : cooldown > 0 ? `Wait ${cooldown}s` : 'Send confirmation link' }} {{ changing ? 'Sending' : cooldown > 0 ? `Wait ${cooldown}s` : 'Send confirmation link' }}
</button> </button>
</form> </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>
<section> <section>