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
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>