From 36fd9050fe770dd15b9a2f93b0ace2607105574d Mon Sep 17 00:00:00 2001
From: Steve Cliff <steve@devcloud.guru>
Date: Tue, 5 May 2026 11:23:36 +0100
Subject: [PATCH] ui(tags): edit-button label, Save-tags width, persistent help
 text

---
 web/templates/partials/host_chrome.html | 39 +++++++++++++++----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/web/templates/partials/host_chrome.html b/web/templates/partials/host_chrome.html
index ab85124..dad2c56 100644
--- a/web/templates/partials/host_chrome.html
+++ b/web/templates/partials/host_chrome.html
@@ -41,10 +41,10 @@
         <h1 class="mono text-[26px] font-medium tracking-[0.005em] text-ink">{{$host.Name}}</h1>
         <div class="flex gap-1.5 items-center">
           {{range $host.Tags}}<a href="/?tag={{.}}" class="tag" title="filter dashboard by this tag">{{.}}</a>{{end}}
-          <button type="button" class="text-ink-fade text-[11px] hover:text-ink-mid"
-                  style="padding: 2px 6px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;"
+          <button type="button" class="text-ink-fade text-[11px] hover:text-ink-mid whitespace-nowrap"
+                  style="padding: 2px 8px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;"
                   onclick="document.getElementById('tags-edit-{{$host.ID}}').classList.toggle('hidden')"
-                  title="Edit tags">+ tag</button>
+                  title="Edit tags">{{if $host.Tags}}edit tags{{else}}add tags{{end}}</button>
         </div>
         {{if gt $page.ScheduleVersion 0}}
           <span class="mono text-[11px] text-ink-mute ml-2">
@@ -57,21 +57,28 @@
           </span>
         {{end}}
       </div>
-      {{/* Inline tags editor — hidden by default; toggled by the "+ tag"
-           button above. Comma-separated input with autocomplete sourced
-           from the fleet's distinct tags via a <datalist>. */}}
+      {{/* Inline tags editor — hidden by default; toggled by the
+           "edit/add tags" button above. Comma-separated input with
+           autocomplete sourced from the fleet's distinct tags via a
+           <datalist>. The help line under the input is always visible
+           because the placeholder hint disappears once the field has
+           a value, and operators editing existing tags are exactly
+           the people most likely to forget the comma rule. */}}
       <form id="tags-edit-{{$host.ID}}" method="post"
             action="/hosts/{{$host.ID}}/tags"
-            class="hidden mt-3 flex items-center gap-2">
-        <input type="text" name="tags" class="field mono text-[12px]"
-               style="max-width: 480px;"
-               value="{{joinComma $host.Tags}}"
-               list="known-tags"
-               placeholder="comma-separated · e.g. prod, london, db" />
-        <datalist id="known-tags">
-          {{range $page.KnownTags}}<option value="{{.}}">{{end}}
-        </datalist>
-        <button type="submit" class="btn btn-primary">Save tags</button>
+            class="hidden mt-3"
+            style="max-width: 640px;">
+        <div class="flex items-start gap-2">
+          <input type="text" name="tags" class="field mono text-[12px]"
+                 value="{{joinComma $host.Tags}}"
+                 list="known-tags"
+                 placeholder="prod, london, db" />
+          <datalist id="known-tags">
+            {{range $page.KnownTags}}<option value="{{.}}">{{end}}
+          </datalist>
+          <button type="submit" class="btn btn-primary whitespace-nowrap">Save tags</button>
+        </div>
+        <div class="field-help">Comma-separated. Lowercased automatically.</div>
       </form>
       <div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute">
         <span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span>