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

@@ @@ -325,11 +325,15 @@ body.drawer-open .drawer-backdrop { @@
   border-radius: var(--fb-radius);
   padding: 1rem;
+}
 /* The first child sits against the card padding, so its own top margin would
    double the gap (empty-state notes, first form labels, headings). */
 /* The first/last child sits against the card padding, so its own top/bottom
    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);

@@ @@ -77,10 +77,20 @@ @@
         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);
       });
+    }