admin: move the edit link onto the back-link line
Under the name it cluttered the record's read; at the line's right
edge it is the same quiet gesture as the dashboard's section-head
action.

Assisted-by: GLM-5.3 via pi
change pwrqtmvsxmrmknuqoqosuzuxksssursz
commit a7b1537aa0511f13f4a475841bac99f71753fda0
author Alpha Chen <alpha@kejadlen.dev>
date
parent yooquvuk
diff --git a/lib/pro_tacts/admin/contacts_show.rb b/lib/pro_tacts/admin/contacts_show.rb
index ae31606..992f0be 100644
--- a/lib/pro_tacts/admin/contacts_show.rb
+++ b/lib/pro_tacts/admin/contacts_show.rb
@@ -32,7 +32,13 @@ module ProTacts
 
       def view_template
         render Layout.new(title: @contact.name || @contact.id) do
-          a(href: "/", class: "type-label") { "‹ contacts" }
+          # The record's one action rides the back-link's line, at its
+          # right edge — the dashboard's section-head gesture — so the
+          # card below stays a clean read of the record.
+          div(class: "record-nav") do
+            a(href: "/", class: "type-label") { "‹ contacts" }
+            a(href: "/contacts/#{@contact.id}/edit", class: "btn", data_size: "sm") { "edit" }
+          end
           div(class: "card") do
             div(class: "card-body") do
               div(class: "detail-header") do
@@ -45,13 +51,6 @@ module ProTacts
                   if @contact.nickname
                     div(class: "type-h3 gl-muted", style: "margin-top: var(--gl-space-2xs);") { @contact.nickname }
                   end
-                  # The record's one action, quiet and under the name
-                  # — the edit screen is this page's other mode (see
-                  # Admin::ContactsEdit). A link in Gloss's `.btn`
-                  # contract: navigation wearing a button's clothes.
-                  div(style: "margin-top: var(--gl-space-2xs);") do
-                    a(href: "/contacts/#{@contact.id}/edit", class: "btn", data_size: "sm") { "edit" }
-                  end
                 end
                 # Only a picture earns this slot: an initials circle
                 # beside the name in type-h2 would repeat what the name
diff --git a/public/admin.css b/public/admin.css
index 7248b89..02c531f 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -4,6 +4,18 @@
    rem width in the spirit of card.css's own max-width: 18rem; nothing
    here is a hex, a px, or a duration. */
 
+/* The record page's one action, on the back-link's line: edit at the
+   right edge, the same quiet gesture as the dashboard's section-head,
+   in flow here because no sibling column shares the line — the
+   baseline problem that makes section-head pin its button absolutely
+   does not arise. The main column's gap spaces the line from the
+   card, so no margin of its own. */
+.record-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 /* The editor's submit row: the buttons sit beside each other under
    the stacked fields, rather than in the stack's own gap. */
 .form-actions {
diff --git a/test/pro_tacts/admin/test_contacts_pages.rb b/test/pro_tacts/admin/test_contacts_pages.rb
index 0966835..de534b4 100644
--- a/test/pro_tacts/admin/test_contacts_pages.rb
+++ b/test/pro_tacts/admin/test_contacts_pages.rb
@@ -604,13 +604,16 @@ class AdminContactsPagesTest < Minitest::Test
     assert_equal 404, last_response.status
   end
 
-  # The details page names its other mode: the edit link sits under
-  # the name, the record's one action.
+  # The details page names its other mode: the edit link rides the
+  # back-link's line at the right edge, so the card below stays a
+  # clean read of the record.
   def test_the_details_page_links_to_the_edit_screen
     with_contacts({"ada" => ADA}) do
       get "/contacts/ada"
 
-      assert_includes last_response.body, 'href="/contacts/ada/edit"'
+      assert_includes last_response.body,
+        '<div class="record-nav"><a href="/" class="type-label">‹ contacts</a>' \
+        '<a href="/contacts/ada/edit" class="btn" data-size="sm">edit</a></div>'
     end
   end