Tighten the People page

An account's "add to" picker and its button sit on one line; suspend
and remove, the two things done least and the two drawn in red on every
row, are in a menu behind "⋯"; and the box for a new project under
every team, and for a new team under every organization, is folded
behind "+ project" and "+ team" until wanted.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

internal/web/static/base.css

@@ -741,3 +741,25 @@ table.gpu-list { width: auto; flex: 1 1 22rem; }
 @media (prefers-reduced-motion: reduce) {
   .nvswitch i, .backplane, .gpu-chip.joined, .gpu-chip.lost { animation: none; }
 }
+
+/* People: an account row on one line, its rarer actions in a menu. */
+form.add-to { display: flex; gap: .35rem; align-items: center; flex-wrap: nowrap; }
+form.add-to select { width: auto; max-width: 13rem; margin: 0; padding: .25rem .4rem; font-size: .8rem; }
+form.add-to button { padding: .25rem .6rem; font-size: .78rem; }
+details.row-menu { position: relative; display: inline-block; }
+details.row-menu > summary { list-style: none; cursor: pointer; padding: .1rem .55rem; border-radius: 6px;
+  color: var(--muted); font-weight: 700; letter-spacing: .05em; user-select: none; }
+details.row-menu > summary::-webkit-details-marker { display: none; }
+details.row-menu > summary:hover, details.row-menu[open] > summary { color: var(--fg); background: var(--card); }
+details.row-menu .menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 5; min-width: 8rem;
+  display: flex; flex-direction: column; gap: .15rem; padding: .35rem; border-radius: 8px;
+  background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
+details.row-menu .menu form { display: block; }
+details.row-menu .menu button { width: 100%; text-align: left; padding: .3rem .5rem; border-radius: 5px; }
+details.row-menu .menu button:hover { background: var(--bg); }
+details.add-inline { margin: .25rem 0 .4rem; }
+details.add-inline > summary { list-style: none; cursor: pointer; display: inline-block; font-size: .8rem;
+  color: var(--accent); padding: .1rem .2rem; }
+details.add-inline > summary::-webkit-details-marker { display: none; }
+details.add-inline[open] > summary { color: var(--muted); }
+details.add-inline form.add { margin-top: .3rem; }

internal/web/templates/admin_users.html

@@ -176,21 +176,29 @@ project in the team — an account can only be approved into a project.</p>
     </details>
     {{end}}
 
-    <form method="post" action="/admin/tenancy/project" class="add">
-      <input type="hidden" name="csrf" value="{{$.CSRF}}">
-      <input type="hidden" name="team" value="{{$team.ID}}">
-      <input type="text" name="name" required placeholder="new project in {{$team.Name}}" aria-label="New project in {{$team.Name}}">
-      <button type="submit">Add</button>
-    </form>
+    {{/* Folded until wanted: a box open under every team was most of the
+         tree's height and read as something to fill in. */}}
+    <details class="add-inline">
+      <summary>+ project</summary>
+      <form method="post" action="/admin/tenancy/project" class="add">
+        <input type="hidden" name="csrf" value="{{$.CSRF}}">
+        <input type="hidden" name="team" value="{{$team.ID}}">
+        <input type="text" name="name" required placeholder="new project in {{$team.Name}}" aria-label="New project in {{$team.Name}}">
+        <button type="submit">Add</button>
+      </form>
+    </details>
   </div>
   {{end}}
 
-  <form method="post" action="/admin/tenancy/team" class="add team-add">
-    <input type="hidden" name="csrf" value="{{$.CSRF}}">
-    <input type="hidden" name="org" value="{{$org.ID}}">
-    <input type="text" name="name" required placeholder="new team in {{$org.Name}}" aria-label="New team in {{$org.Name}}">
-    <button type="submit">Add</button>
-  </form>
+  <details class="add-inline team-add">
+    <summary>+ team</summary>
+    <form method="post" action="/admin/tenancy/team" class="add">
+      <input type="hidden" name="csrf" value="{{$.CSRF}}">
+      <input type="hidden" name="org" value="{{$org.ID}}">
+      <input type="text" name="name" required placeholder="new team in {{$org.Name}}" aria-label="New team in {{$org.Name}}">
+      <button type="submit">Add</button>
+    </form>
+  </details>
 </section>
 {{end}}
 
@@ -254,6 +262,11 @@ access than it had, so they need a shell on the control plane —
 {{/* The actions every account row carries: suspend or reinstate, remove. */}}
 {{define "state-actions"}}{{$u := .U}}{{$d := .D}}
     {{if ne $u.ID $d.AdminID}}
+    {{/* In a menu: two red links on every row made the list look alarmed,
+         and they are the two things done least often. */}}
+    <details class="row-menu">
+    <summary aria-label="More for {{$u.Email}}" title="More">⋯</summary>
+    <div class="menu">
     {{if eq (printf "%s" $u.State) "active"}}
     <form method="post" action="/admin/users/{{$u.ID}}/suspend" class="inline">
       <input type="hidden" name="csrf" value="{{$d.CSRF}}">
@@ -273,6 +286,8 @@ access than it had, so they need a shell on the control plane —
       <input type="hidden" name="open" value="{{.Open}}">
       <button type="submit" class="link danger">remove</button>
     </form>
+    </div>
+    </details>
     {{else}}<span class="note">you</span>{{end}}
 {{end}}
 
@@ -303,7 +318,7 @@ access than it had, so they need a shell on the control plane —
   </td>
   <td>{{ago $u.LastLoginAt}}</td>
   <td>
-    <form method="post" action="/admin/users/{{$u.ID}}/join" class="inline">
+    <form method="post" action="/admin/users/{{$u.ID}}/join" class="inline add-to">
       <input type="hidden" name="csrf" value="{{$d.CSRF}}">
       <select name="scope" aria-label="Add {{$u.Email}} to" required>
         <option value="">choose…</option>