Style polish

app/views/users/credentials/_credential.html.erb

@@ -1,9 +1,9 @@
 <tr style="view-transition-name: <%= dom_id(credential) %>">
   <td><strong><%= credential.name.presence || "Passkey" %></strong></td>
-  <td><%= local_datetime_tag credential.created_at, style: :datetime %></td>
+  <td class="txt-nowrap"><%= local_datetime_tag credential.created_at, style: :datetime %></td>
   <td>
     <%= button_to user_credential_path(@user, credential), method: :delete,
-          class: "btn txt-negative btn--circle txt-x-small borderless fill-transparent",
+          class: "btn btn--circle txt-negative txt-xx-small borderless",
           data: { turbo_confirm: "Are you sure you want to remove this passkey?" } do %>
       <%= icon_tag "trash" %>
       <span class="for-screen-reader">Remove this passkey</span>

app/views/users/credentials/index.html.erb

@@ -8,10 +8,11 @@
   <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
-<section class="panel panel--wide shadow center">
+<section class="panel panel--wide shadow center txt-align-start">
+  <p class="margin-none-block-start">Passkeys let you sign in using your device’s biometrics, PIN, or security key&mdash;no email code needed.</p>
+
   <% if @credentials.any? %>
-    <p class="margin-none-block-start">Passkeys let you sign in without email codes. They use your device's biometrics, PIN, or security key.</p>
-    <table class="access_tokens_table margin-block-end-double max-width txt-small">
+    <table class="access-tokens">
       <thead>
         <tr>
           <th>Passkey</th>
@@ -23,8 +24,6 @@
         <%= render partial: "users/credentials/credential", collection: @credentials %>
       </tbody>
     </table>
-  <% else %>
-    <p class="margin-none-block-start">Passkeys let you sign in without email codes. They use your device's biometrics, PIN, or security key.</p>
   <% end %>
 
   <%= link_to new_user_credential_path(@user), class: "btn btn--link" do %>

app/views/users/credentials/new.html.erb

@@ -8,11 +8,10 @@
   <h1 class="header__title" data-bridge--title-target="header"><%= @page_title %></h1>
 <% end %>
 
-<article class="panel panel--wide shadow center txt-align-start">
+<section class="panel panel--wide shadow center txt-align-start">
   <%= form_with url: user_credentials_path(@user),
         data: { controller: "credential", credential_public_key_value: @creation_options.as_json },
         html: { class: "flex flex-column gap" } do |form| %>
-    <p>A passkey lets you sign in using your device's biometrics, PIN, or security key — no email code needed.</p>
 
     <div class="flex flex-column gap-half">
       <strong><label for="credential_name">Passkey name</label></strong>
@@ -29,4 +28,4 @@
   <% end %>
 
   <%= link_to "Cancel and go back", user_credentials_path(@user), hidden: true %>
-</article>
+</section>