From 9505d20e0dbbee41cf817265628bef11a8a031cd Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Sat, 5 Sep 2026 00:57:47 +0100
Subject: [PATCH] Add-passkey form: one line, "Passkey label" placeholder,
 shorter label

Switches from the stacked .form pattern to .field-row, same as the
other single-line forms (input + fit-width button); the visible
"Label" span becomes a placeholder/aria-label instead, and the button
reads "Add passkey" rather than "Add a passkey".

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

diff --git a/web/src/views/ProfileView.vue b/web/src/views/ProfileView.vue
index 5605d64..a9b5c82 100644
--- a/web/src/views/ProfileView.vue
+++ b/web/src/views/ProfileView.vue
@@ -199,16 +199,20 @@ async function onRemovePasskey(passkey: Passkey) {
           </li>
         </ul>
 
-        <form class="form form--new-card" @submit.prevent="onAddPasskey">
-          <label>
-            <span>Label</span>
-            <input v-model="newLabel" class="field" type="text" maxlength="100" />
-          </label>
-          <p v-if="addError" class="form-error">{{ addError }}</p>
+        <form class="field-row form--new-card" @submit.prevent="onAddPasskey">
+          <input
+            v-model="newLabel"
+            class="field field--compact"
+            type="text"
+            maxlength="100"
+            placeholder="Passkey label"
+            aria-label="Passkey label"
+          />
           <button type="submit" :disabled="adding">
-            {{ adding ? 'Waiting for your passkey…' : 'Add a passkey' }}
+            {{ adding ? 'Waiting for your passkey…' : 'Add passkey' }}
           </button>
         </form>
+        <p v-if="addError" class="form-error">{{ addError }}</p>
       </template>
     </section>
   </section>