On a phone the header now holds only what nothing else does: the
search glyph at the start of the row and the account at the end. The
name's one job there was the way home, so home joins contacts and
groups at the top of the account menu. Wider screens keep the name.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CxsxtnQrJKvwHGfRmdhR9F

diff --git a/lib/pro_tacts/admin/layout.rb b/lib/pro_tacts/admin/layout.rb
index 754b403..ba57c5f 100644
--- a/lib/pro_tacts/admin/layout.rb
+++ b/lib/pro_tacts/admin/layout.rb
@@ -125,9 +125,9 @@ module ProTacts
               # anywhere (docs/DESIGN.md, "The core idea"), search
               # still finding a group by name — with who is asking
               # named beside them. On a phone the two move into the
-              # account menu (the list below repeats them for that),
-              # leaving the header the name, the search, and the
-              # account.
+              # account menu with home, the name's own link (the list
+              # below repeats all three for that), leaving the header
+              # the search and the account.
               nav do
                 a(href: "/contacts") { "contacts" }
                 a(href: "/groups") { "groups" }
@@ -155,6 +155,7 @@ module ProTacts
                   render Icon.new(:chevron_down)
                 end
                 ul(id: MENU, popover: "auto", class: "user-menu-list") do
+                  li(class: "menu-nav") { a(href: "/") { "home" } }
                   li(class: "menu-nav") { a(href: "/contacts") { "contacts" } }
                   li(class: "menu-nav") { a(href: "/groups") { "groups" } }
                   li { a(href: "/import") { "import" } }
diff --git a/public/admin.css b/public/admin.css
index 489dd23..b817959 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -452,8 +452,9 @@ textarea:focus {
 }
 
 /* The search's label only folds it on a phone, below; wider, it is
-   the field's box and the glyph is not drawn. The menu repeats the
-   destinations for the phone too, and wider they are in the nav. */
+   the field's box and the glyph is not drawn. The menu repeats home
+   and the destinations for the phone too, and wider the name and the
+   nav carry them. */
 .search-form label {
   display: block;
 }
@@ -465,24 +466,25 @@ textarea:focus {
 /* A phone has no room for the name, the search, two destinations
    and the account in one row: left there, the search shrank to an
    empty square, the name broke at its hyphen, and the account ran
-   past the right edge. So the destinations move into the account
-   menu (Layout repeats them there), and the search folds into its
-   glyph beside the account. A tap on the glyph focuses the field its
+   past the right edge. So the header keeps the two things only it
+   can do, the search and the account. The name goes, being the way
+   home and nothing more once the tab says which instance this is,
+   and home joins the destinations in the account menu (Layout
+   repeats them there). The search folds into its glyph at the
+   start of the row, pulled out by its padding so it stands on the
+   edge the page's column does; a tap on it focuses the field its
    label holds, and while the field has focus, or a query to show,
-   it opens across the whole header over the name and the account,
-   which are hidden rather than removed so the header keeps its
-   height. The account's login is whatever the proxy vouches for,
-   usually an email, so it is what gives up width, ending in an
-   ellipsis. The name and the login line up on their baselines, the
-   two being different sizes of type, which centering left a pixel
-   or three apart; the glyph has no baseline and centers. The
-   breakpoint is where the one row still leaves the search room for
-   its placeholder. */
+   it opens across the whole header over the account, which is
+   hidden rather than removed so the header keeps its height. The
+   login is whatever the proxy vouches for, usually an email, so it
+   ends in an ellipsis when it runs out of room. The breakpoint is
+   where the one row still leaves the search room for its
+   placeholder. */
 @media (max-width: 48rem) {
   .admin-header {
     position: relative;
-    align-items: baseline;
   }
+  .admin-header > a,
   .admin-header nav {
     display: none;
   }
@@ -491,8 +493,7 @@ textarea:focus {
   }
   .admin-header .search-form {
     flex: none;
-    align-self: center;
-    margin-left: auto;
+    margin-inline-start: calc(-1 * var(--gl-space-3xs));
     max-width: none;
   }
   .search-form label {
@@ -548,12 +549,10 @@ textarea:focus {
   }
   .user-menu {
     min-width: 0;
+    margin-inline-start: auto;
   }
-  /* The same pull at the start, so the glyph sits as far from the
-     login as from the name rather than a padding's width further. */
   .user-menu button {
     min-width: 0;
-    margin-inline-start: calc(-1 * var(--gl-space-2xs));
   }
   .user-menu button span {
     overflow: hidden;
diff --git a/test/pro_tacts/admin/test_layout.rb b/test/pro_tacts/admin/test_layout.rb
index 0d779b1..ce84d6a 100644
--- a/test/pro_tacts/admin/test_layout.rb
+++ b/test/pro_tacts/admin/test_layout.rb
@@ -57,11 +57,13 @@ class AdminLayoutTest < Minitest::Test
     assert_includes header_html, %(<a href="/" class="icon-button search-clear" data-size="sm" aria-label="Clear search">)
   end
 
-  # On a phone the nav is hidden and the menu carries the
-  # destinations instead (admin.css), so both have to be there.
+  # On a phone the name and the nav are hidden and the menu carries
+  # home and the destinations instead (admin.css), so both have to
+  # be there.
   def test_the_account_menu_repeats_the_destinations
     with_env({})
 
+    assert_includes header_html, %(<li class="menu-nav"><a href="/">home</a></li>)
     assert_includes header_html, %(<li class="menu-nav"><a href="/contacts">contacts</a></li>)
     assert_includes header_html, %(<li class="menu-nav"><a href="/groups">groups</a></li>)
   end