Give every choice-link one pill, and stop the NVLink page breaking them

The usage and organization pages drew their choices as filled green
chips, the newer pages as outlined pills. They are all the outlined
pill now.

The NVLink page's GPU squares were styled as .chip, the class those
choices already used, which shrank the usage page's filters into
1.7rem squares wherever the stylesheet loaded. They are .gpu-chip.

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

internal/web/node_page_test.go

@@ -162,8 +162,8 @@ func (nvlSource) NVLink() nvlink.Report {
 
 func TestTheNVLinkPageDrawsEachDomainAsARack(t *testing.T) {
 	_, body := get(t, NVLinkPage(nvlSource{}, false, "v1"), "http://x/admin/nvlink", nil)
-	for _, want := range []string{`class="rack troubled"`, "76b1ad76·7", "1/2</b><span>trays usable", `class="chip joined"`,
-		`class="chip lost"`, `class="tray out"`, "t2: nvidia-imex is inactive", `class="imex up"`} {
+	for _, want := range []string{`class="rack troubled"`, "76b1ad76·7", "1/2</b><span>trays usable", `class="gpu-chip joined"`,
+		`class="gpu-chip lost"`, `class="tray out"`, "t2: nvidia-imex is inactive", `class="imex up"`} {
 		if !strings.Contains(body, want) {
 			t.Errorf("missing %q", want)
 		}

internal/web/static/base.css

@@ -311,15 +311,11 @@ tr.editing form { margin: .4rem 0; }
                 letter-spacing: .04em; margin-right: .2rem; }
 .filter-label + .chip { margin-right: 0; }
 .filters .filter-label:not(:first-child) { margin-left: 1rem; }
-.chip { font-size: .85rem; text-decoration: none; color: var(--fg);
-        background: var(--card); border: 1px solid var(--line);
-        border-radius: 999px; padding: .25rem .7rem; }
-.chip:hover { border-color: var(--accent); }
-/* The selected one is filled, not merely outlined: an outline reads as
-   available rather than as chosen, and with four of them side by side the
-   difference has to survive a glance. */
-.chip.on { background: var(--accent); border-color: var(--accent); color: var(--bg);
-           font-weight: 600; }
+/* The same pill as .pills a: one look for every choice that is a link. */
+.chip { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--muted);
+  padding: .3rem .8rem; border: 1px solid transparent; border-radius: 999px; }
+.chip:hover { color: var(--fg); }
+.chip.on { color: var(--fg); background: var(--card); border-color: var(--line); }
 
 /* People: the tenancy tree with its people and keys. Indented by level and
    ruled on the left, so which team a project is in reads at a glance without
@@ -728,12 +724,12 @@ table.gpu-list { width: auto; flex: 1 1 22rem; }
 .tray-name { min-width: 6.5rem; font-size: .8rem; font-weight: 700; color: #e0f2fe; text-decoration: none; }
 .tray-name:hover { color: #5eead4; }
 .chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; }
-.chip { width: 1.7rem; height: 1.7rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
+.gpu-chip { width: 1.7rem; height: 1.7rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
   font-size: .62rem; font-weight: 800; color: #04211c; cursor: default; }
-.chip.joined { background: linear-gradient(135deg, #5eead4, #14b8a6); box-shadow: 0 0 12px rgba(45, 212, 191, .55);
+.gpu-chip.joined { background: linear-gradient(135deg, #5eead4, #14b8a6); box-shadow: 0 0 12px rgba(45, 212, 191, .55);
   animation: nv-breathe 3.6s ease-in-out infinite; }
-.chip.joined.slow { background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 0 12px rgba(245, 158, 11, .6); }
-.chip.lost { color: #fff; background: linear-gradient(135deg, #fb7185, #be123c); box-shadow: 0 0 14px rgba(251, 113, 133, .7);
+.gpu-chip.joined.slow { background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 0 12px rgba(245, 158, 11, .6); }
+.gpu-chip.lost { color: #fff; background: linear-gradient(135deg, #fb7185, #be123c); box-shadow: 0 0 14px rgba(251, 113, 133, .7);
   animation: nv-alarm 1.2s ease-in-out infinite; }
 @keyframes nv-breathe { 50% { box-shadow: 0 0 4px rgba(45, 212, 191, .25); } }
 @keyframes nv-alarm { 50% { opacity: .55; } }
@@ -743,5 +739,5 @@ table.gpu-list { width: auto; flex: 1 1 22rem; }
 .rack-problems { padding: 0 1rem .9rem; margin: 0; }
 .rack-problems li { color: #dbe4ff; }
 @media (prefers-reduced-motion: reduce) {
-  .nvswitch i, .backplane, .chip.joined, .chip.lost { animation: none; }
+  .nvswitch i, .backplane, .gpu-chip.joined, .gpu-chip.lost { animation: none; }
 }

internal/web/templates/nvlink.html

@@ -33,7 +33,7 @@ GPUs of an NVL72 rack, or an NVLink Switch system, to one.</p>
       {{range .Members}}
       <div class="tray{{if not .Usable}} out{{end}}">
         <a class="tray-name" href="{{$.Nodes}}/{{.Node}}">{{.Node}}</a>
-        <div class="chips">{{range .GPUs}}<span class="chip{{if .Joined}} joined{{else}} lost{{end}}{{if and .Bandwidth (ne .Bandwidth "Full")}} slow{{end}}"
+        <div class="chips">{{range .GPUs}}<span class="gpu-chip{{if .Joined}} joined{{else}} lost{{end}}{{if and .Bandwidth (ne .Bandwidth "Full")}} slow{{end}}"
           title="GPU {{.Index}} · {{.Name}} · {{or .State "no fabric"}}{{if .Bandwidth}} · {{.Bandwidth}} bandwidth{{end}}">{{.Index}}</span>{{end}}</div>
         <span class="imex{{if and (eq .IMEX "active") .IMEXChannels}} up{{end}}" title="nvidia-imex {{or .IMEX "not installed"}}, {{.IMEXChannels}} channel(s)">IMEX</span>
       </div>