hanna/fabrica

fix(web): center empty-card notes and two-tone the label selector chips

1820303 · hanna committed on 2026-07-26

Zero a card's last child's bottom margin (mirroring the first-child rule) so a
card holding only an empty-state note ("No open issues.") sits centred instead
of bottom-heavy. In the label dropdown, render a checked scoped label's summary
chip two-tone (scope on a neutral background, value in colour) to match the
static label chips.

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

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +6 −2

assets/fabrica.js +12 −2

   border-radius: var(--fb-radius);
   padding: 1rem;
+}
-/* The first child sits against the card padding, so its own top margin would
+/* The first/last child sits against the card padding, so its own top/bottom
-   double the gap (empty-state notes, first form labels, headings). */
+   margin would double the gap — most visibly on a card holding only an
+   empty-state note ("No open issues."), which would otherwise sit off-centre. */
 .card > :first-child {
   margin-top: 0;
+}
+.card > :last-child {
+  margin-bottom: 0;
+}
 .muted {
   color: var(--fb-fg-muted);

         return;
+      }
       checked.forEach(function (cb) {
+        var name = cb.getAttribute("data-label-name") || cb.value;
         var chip = document.createElement("span");
-        chip.className = "label-chip";
         chip.style.setProperty("--label-color", cb.getAttribute("data-label-color") || "#888");
-        chip.textContent = cb.getAttribute("data-label-name") || cb.value;
+        var sep = name.indexOf(": ");
+        if (sep === -1) {
+          chip.className = "label-chip";
+          chip.textContent = name;
+        } else {
+          // Scoped label: static markup, text set via textContent (escaped).
+          chip.className = "label-chip label-chip-scoped";
+          chip.innerHTML = '<span class="label-scope"></span><span class="label-value"></span>';
+          chip.firstChild.textContent = name.slice(0, sep).trim();
+          chip.lastChild.textContent = name.slice(sep + 2).trim();
+        }
         summaryLabel.appendChild(chip);
       });
+    }