Style polish

app/assets/stylesheets/access-tokens.css

@@ -1,19 +1,33 @@
-.access_tokens_table {
+.access-tokens {
   border-collapse: collapse;
+  font-size: var(--text-small);
   inline-size: 100%;
+  margin-block-end: 2lh;
 
   td, th {
-    border-block-end: 1px solid var(--color-ink-light);
-    padding-inline: var(--inline-space);
+    border-block-end: 1px solid var(--color-ink-lighter);
     text-align: start;
+
+    &:first-child {
+      inline-size: 100%;
+    }
+
+    &:not(:first-child) {
+      padding-inline-start: var(--inline-space);
+    }
+
+    &:not(:last-child) {
+      padding-inline-end: var(--inline-space);
+    }
   }
 
   th {
+    color: var(--color-ink-dark);
     font-size: var(--text-x-small);
     text-transform: uppercase;
   }
 
-  tr:nth-of-type(even) {
-    background-color: var(--color-ink-lightest);
+  td {
+    padding-block: 8px;
   }
-}
+}

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>