More consistent shared styling between credential and session cards.

frontend/src/assets/style.css

@@ -462,7 +462,6 @@ th {
 }
 
 @media (max-width: 720px) {
-  /* Keep record-list responsive, but leave credential-list and session-list as fixed-width grid */
   .record-list { display: flex; flex-direction: column; max-width: 100%; }
 }
 
@@ -549,6 +548,16 @@ th {
   align-items: center;
 }
 
+.session-dates {
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: 7rem 1fr;
+  gap: 0.35rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  align-items: center;
+}
+
 .date-label {
   font-weight: 500;
   color: inherit;
@@ -567,16 +576,6 @@ th {
   font-size: 1.2rem;
 }
 
-.session-details {
-  font-size: 0.9rem;
-  color: var(--color-text-muted);
-}
-
-.session-badges {
-  display: flex;
-  gap: var(--space-xs);
-}
-
 .badge {
   padding: 0.2rem 0.5rem;
   border-radius: var(--radius-sm);
@@ -598,7 +597,7 @@ th {
 
 
 .session-meta-info {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--color-text-muted);
   font-family: monospace;
 }

frontend/src/components/RegistrationLinkModal.vue

@@ -83,13 +83,8 @@ const qrCanvas = ref(null)
 const displayUrl = computed(() => url.value ? url.value.replace(/^[^:]+:\/\//,'') : '')
 
 const expirationMessage = computed(() => {
-  if (!expires.value) return '⚠️ Expires soon and can only be used once.'
   const timeStr = formatDate(expires.value)
-  if (timeStr.startsWith('In ')) {
+  return `⚠️ Expires ${timeStr.startsWith('In ') ? timeStr.substring(3) : timeStr} and can only be used once.`
-    return `⚠️ Expires ${timeStr.substring(3)} and can only be used once.`
-  } else {
-    return `⚠️ Expires ${timeStr} and can only be used once.`
-  }
 })
 
 async function fetchLink() {

frontend/src/components/SessionList.vue

@@ -30,8 +30,11 @@
               </div>
             </div>
             <div class="item-details">
-              <div class="session-details">Last used: {{ formatDate(session.last_renewed) }}</div>
+              <div class="session-dates">
-              <div class="session-meta-info">{{ session.user_agent }} {{ session.ip }}</div>
+                <span class="date-label">Last used:</span>
+                <span class="date-value">{{ formatDate(session.last_renewed) }}</span>
+                <span class="session-meta-info">{{ session.user_agent }} {{ session.ip }}</span>
+              </div>
             </div>
           </div>
         </template>
@@ -61,4 +64,10 @@ const sessionHostLabel = (session) => {
   if (!session || !session.host) return 'Unbound host'
   return session.host
 }
-</script>
+</script>
+
+<style>
+.session-meta-info {
+  grid-column: span 2;
+}
+</style>