Profile view UX improvements. More consistent styling across the application.

frontend/src/components/Breadcrumbs.vue

@@ -33,6 +33,5 @@ const crumbs = computed(() => {
 .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
 .breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; font-size: .9rem; }
 .breadcrumbs a { text-decoration: none; color: var(--color-link); padding: 0 .25rem; border-radius:4px; transition: color 0.2s ease, background 0.2s ease; }
-.breadcrumbs a:hover, .breadcrumbs a:focus-visible { text-decoration: underline; color: var(--color-link-hover); outline: none; }
 .breadcrumbs .sep { color: var(--color-text-muted); margin: 0; }
 </style>

frontend/src/components/CredentialList.vue

@@ -12,6 +12,8 @@
           'is-linked-session': hoveredSessionCredentialUuid === credential.credential_uuid
         }]"
         tabindex="0"
+        @mousedown.prevent
+        @click.capture="handleCardClick"
         @focusin="handleCredentialFocus(credential.credential_uuid)"
         @focusout="handleCredentialBlur($event)"
         @keydown="handleDelete($event, credential)"
@@ -59,7 +61,6 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
@@ -84,6 +85,13 @@ const handleCredentialBlur = (event) => {
   }
 }
 
+const handleCardClick = (event) => {
+  if (!event.currentTarget.matches(':focus')) {
+    event.currentTarget.focus()
+    event.stopPropagation()
+  }
+}
+
 const handleDelete = (event, credential) => {
   const apple = navigator.userAgent.includes('Mac OS')
   if (event.key === 'Delete' || apple && event.key === 'Backspace') {
@@ -105,3 +113,12 @@ const getCredentialAuthIcon = (credential) => {
   return info[iconKey] || null
 }
 </script>
+
+<style>
+.btn-card-delete {
+  display: none;
+}
+.credential-item:focus .btn-card-delete {
+  display: block;
+}
+</style>

frontend/src/components/ProfileView.vue

@@ -19,24 +19,25 @@
         @edit-name="openNameDialog"
       >
         <div class="remote-auth-inline">
-          <label v-if="!showDeviceInfo" class="remote-auth-label">Code words from remote device:</label>
-          <RemoteAuth
+          <label v-if="!showDeviceInfo" class="remote-auth-label">Code words:</label>
+          <RemoteAuthPermit
             ref="pairingEntry"
             title=""
             description=""
-            placeholder="word word word"
             @completed="handlePairingCompleted"
             @error="handlePairingError"
             @device-info-visible="showDeviceInfo = $event"
           />
         </div>
+        <p class="remote-auth-description">Provided by another device requesting remote auth.</p>
       </UserBasicInfo>
     </section>
 
     <section class="section-block">
       <div class="section-header">
         <h2>Your Passkeys</h2>
-        <p class="section-description">Keep at least one trusted passkey so you can always sign in.</p>
+        <p class="section-description">Ideally have at least two passkeys in case you lose one. More than one user can be registered on the same device, giving you a choice at login.</p>
+        <p><a href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">Bitwarden</a> can sync one passkey to all your devices. Other secure options include <b>local passkeys</b>, as well as hardware keys such as <a href="https://www.yubico.com" target="_blank" rel="noopener noreferrer">YubiKey</a>. Cloud sync via Google, Microsoft or iCloud is discouraged.</p>
       </div>
       <div class="section-body">
         <CredentialList
@@ -50,8 +51,8 @@
           @credential-hover="hoveredCredentialUuid = $event"
         />
         <div class="button-row">
-          <button @click="addNewCredential" class="btn-primary">Add New Passkey</button>
-          <button @click="showRegLink = true" class="btn-secondary">Add Another Device</button>
+          <button @click="addNewCredential" class="btn-primary">Register New</button>
+          <button @click="showRegLink = true" class="btn-secondary">Another Device</button>
         </div>
       </div>
     </section>
@@ -62,7 +63,7 @@
       :hovered-credential-uuid="hoveredCredentialUuid"
       @terminate="terminateSession"
       @session-hover="hoveredSession = $event"
-      section-description="Review where you're signed in and end any sessions you no longer recognize."
+      section-description="You are currently signed in to the following sessions. If you don't recognize something, consider deleting not only the session but the associated passkey you suspect is compromised, as only this terminates all linked sessions and prevents logging in again."
     />
 
     <Modal v-if="showNameDialog" @close="showNameDialog = false">
@@ -112,7 +113,7 @@ import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
 import SessionList from '@/components/SessionList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
-import RemoteAuth from '@/components/RemoteAuthPermit.vue'
+import RemoteAuthPermit from '@/components/RemoteAuthPermit.vue'
 import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
 import passkey from '@/utils/passkey'
@@ -167,10 +168,9 @@ const handlePairingError = (message) => {
 const handleDelete = async (credential) => {
   const credentialId = credential?.credential_uuid
   if (!credentialId) return
-  if (!confirm('Are you sure you want to delete this passkey?')) return
   try {
     await authStore.deleteCredential(credentialId)
-    authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
+    authStore.showMessage('Passkey deleted! You should also remove it from your password manager or device.', 'success', 3000)
   } catch (error) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
 }
 
@@ -219,9 +219,12 @@ const saveName = async () => {
 <style scoped>
 .view-lede { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
 .section-header { display: flex; flex-direction: column; gap: 0.4rem; }
-.section-description { margin: 0; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
 .logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
 .remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
 .remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
+.remote-auth-description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
 </style>

frontend/src/components/RemoteAuthPermit.vue

@@ -95,7 +95,7 @@ const props = defineProps({
   title: { type: String, default: 'Help Another Device Sign In' },
   description: { type: String, default: 'Enter the code shown on the device that needs to sign in.' },
   placeholder: { type: String, default: 'Enter three words' },
-  action: { type: String, default: 'login' } // 'login' or 'register'
+  action: { type: String, default: 'login' }, // 'login' or 'register'
 })
 
 const emit = defineEmits(['completed', 'error', 'cancelled', 'back', 'register', 'deviceInfoVisible'])
@@ -654,7 +654,6 @@ function reset() {
 
 onMounted(async () => {
   await fetchSettings()
-  inputRef.value?.focus()
   // Initialize cursor position
   nextTick(() => {
     cursorPos.value = inputRef.value?.selectionStart ?? 0
@@ -696,25 +695,14 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
   max-width: 100%;
 }
 
-/* Slot machine visual display (matches RemoteAuthInline) */
+/* Slot machine visual display (matches RemoteAuthRequest) */
 .slot-machine {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  padding: 0.875rem 1rem;
-  background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm, 6px);
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  display: flex;
   gap: 0;
-  align-items: center;
-  user-select: none;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
   box-sizing: border-box;
   z-index: 1;
 }
@@ -729,15 +717,8 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 }
 
 .slot-reel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex: 1 1 33.333%;
-  min-width: 0;
-  height: 1.8em;
   overflow: visible;
-  position: relative;
-  border-radius: 3px;
 }
 
 .slot-reel:not(:last-child) {

frontend/src/components/RemoteAuthRequest.vue

@@ -360,16 +360,8 @@ defineExpose({ retry, cancel })
 }
 
 .slot-reel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-width: 0;
-  height: 1.8em;
   overflow: hidden;
-  position: relative;
   background: var(--color-surface, rgba(255, 255, 255, 0.5));
-  border-radius: 3px;
 }
 
 .slot-machine:not(.stopped) .slot-reel:nth-child(1) {

frontend/src/components/RestrictedAuth.vue

@@ -39,7 +39,7 @@
 
             <!-- Remote authentication view (request new remote auth) -->
             <div v-else-if="authView === 'remote'" class="auth-view">
-              <RemoteAuthInline
+              <RemoteAuthRequest
                 :active="authView === 'remote'"
                 @authenticated="handleRemoteAuthenticated"
                 @register="handleRemoteRegistration"
@@ -59,7 +59,7 @@ import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
 import { fetchJson, getUserFriendlyErrorMessage } from '@/utils/api'
-import RemoteAuthInline from '@/components/RemoteAuthRequest.vue'
+import RemoteAuthRequest from '@/components/RemoteAuthRequest.vue'
 
 const props = defineProps({
   mode: {

frontend/src/components/SessionList.vue

@@ -1,18 +1,18 @@
 <template>
   <section class="section-block" data-component="session-list-section">
     <div class="section-header">
-      <h2>Active Sessions</h2>
+      <h2>Login Sessions</h2>
       <p class="section-description">{{ sectionDescription }}</p>
     </div>
     <div class="section-body">
-      <div :class="['session-list']">
+      <div>
         <template v-if="Array.isArray(sessions) && sessions.length">
           <div v-for="(group, host) in groupedSessions" :key="host" class="session-group">
             <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
               <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
               <template v-else>🌐 Unbound host</template>
             </h3>
-            <div class="session-group-sessions">
+            <div class="session-list">
               <div
                 v-for="session in group.sessions"
                 :key="session.id"
@@ -22,6 +22,8 @@
                   'is-linked-credential': hoveredCredentialUuid === session.credential_uuid
                 }]"
                 tabindex="0"
+                @mousedown.prevent
+                @click.capture="handleCardClick"
                 @focusin="handleSessionFocus(session)"
                 @focusout="handleSessionBlur($event)"
                 @keydown="handleDelete($event, session)"
@@ -94,6 +96,13 @@ const handleSessionBlur = (event) => {
   }
 }
 
+const handleCardClick = (event) => {
+  if (!event.currentTarget.matches(':focus')) {
+    event.currentTarget.focus()
+    event.stopPropagation()
+  }
+}
+
 const handleDelete = (event, session) => {
   const apple = navigator.userAgent.includes('Mac OS')
   if (event.key === 'Delete' || apple && event.key === 'Backspace') {
@@ -159,55 +168,18 @@ const groupedSessions = computed(() => {
 </script>
 
 <style>
-.session-meta-info {
-  grid-column: span 2;
-}
-[data-component="session-list-section"] .session-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5em;
-}
-.session-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-}
 .session-group-host {
   font-size: 1em;
   font-weight: 600;
-  margin: 0;
-}
-.session-group-host a {
-  color: inherit;
-  text-decoration: none;
-}
-.session-group-host a:hover {
-  text-decoration: underline;
+  margin: 0.5rem 0 0.5rem -1.2rem;
 }
 .session-group-host.is-current-site {
   color: var(--color-accent);
 }
-.session-group-sessions {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
-  gap: 0.5em;
-  align-items: start;
+.btn-card-delete {
+  display: none;
 }
-.session-group-sessions .session-item {
-  width: auto;
-  height: auto;
-  padding: 0.75rem;
-  gap: 0.5rem;
-}
-.session-group-sessions .session-item .item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.session-group-sessions .session-item .item-details {
-  margin-left: 0;
-}
-.session-group-sessions .session-item .session-dates {
-  grid-template-columns: auto 1fr;
+.session-item:focus .btn-card-delete {
+  display: block;
 }
 </style>

frontend/src/components/UserBasicInfo.vue

@@ -11,12 +11,14 @@
       <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
       <div class="role-line" v-if="roleName">{{ roleName }}</div>
     </div>
-    <span class="info-label"><strong>Visits:</strong></span>
-    <span class="info-value">{{ visits || 0 }}</span>
-    <span class="info-label"><strong>Registered:</strong></span>
-    <span class="info-value">{{ formatDate(createdAt) }}</span>
-    <span class="info-label"><strong>Last seen:</strong></span>
-    <span class="info-value">{{ formatDate(lastSeen) }}</span>
+    <div class="user-details">
+      <span class="date-label"><strong>Visits:</strong></span>
+      <span class="date-value">{{ visits || 0 }}</span>
+      <span class="date-label"><strong>Registered:</strong></span>
+      <span class="date-value">{{ formatDate(createdAt) }}</span>
+      <span class="date-label"><strong>Last seen:</strong></span>
+      <span class="date-value">{{ formatDate(lastSeen) }}</span>
+    </div>
     <div v-if="$slots.default" class="user-info-extra">
       <slot></slot>
     </div>
@@ -68,7 +70,7 @@ const userLoaded = computed(() => !!props.name)
     "label3 value3";
 }
 
-@media (min-width: 769px) {
+@media (min-width: 720px) {
   .user-info.has-extra {
     grid-template-columns: auto 1fr 2fr;
     grid-template-areas:
@@ -80,7 +82,7 @@ const userLoaded = computed(() => !!props.name)
   }
 }
 
-.user-name-heading { grid-area: heading; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+.user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
 .org-role-sub { grid-area: org; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
 .org-line { font-size: .7rem; font-weight:600; line-height:1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
 .role-line { font-size:.65rem; color: var(--color-text-muted); line-height:1.1; }
@@ -93,15 +95,14 @@ const userLoaded = computed(() => !!props.name)
 .user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
 .user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
 .user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; }
+.icon { flex: 0 0 auto; font-size: 1.5em; width: 40px; }
 .display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
 .user-name-heading .name-input { width: auto; }
 .name-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.15s, color 0.2s ease; color: var(--color-text); }
+.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; }
 .mini-btn:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
 .mini-btn:active:not(:disabled) { transform: translateY(1px); }
 .mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-@media (max-width: 768px) { .user-info-extra { padding-left: 0; padding-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
-@media (max-width: 480px) { .user-name-heading { flex-direction: column; align-items: flex-start; } .user-name-row.editing { width: 100%; } .display-name { max-width: 100%; } }
+@media (max-width: 720px) { .user-info-extra { padding-left: 0; padding-top: 1rem; margin-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
 </style>