From 8b0a5853bab2e71dd0030dcddb8c3be8a31d9e4e Mon Sep 17 00:00:00 2001
From: Graham Barber <did:plc:57od6g2ic3e3b3kauctjmo3k>
Date: Mon, 17 Aug 2026 21:34:13 -0700
Subject: [PATCH] =?UTF-8?q?style(web):=20tag=20chips=20=E2=80=94=20cluster?=
 =?UTF-8?q?,=20cadence,=20and=20stated=20bindings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Impeccable layout pass on the tag display: stream tags become
one wrapping cluster instead of a tower of bordered boxes, set off
from the facts (date, refs) by a wider interval — facts then
claims, two registers in one rail; on mobile the row's own gaps do
the separating. The release page drops its negative-margin
correction for the stated relationship — a tagged title binds
tight to its chips and the cluster hands off to the prose. Chip
padding evens out against the inline-code register.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PWXFcuaRLZycYVAF7senMK
---
 .../lib/components/ChangelogStreamPage.svelte | 29 +++++++++++++++----
 web/src/lib/components/ReleasePage.svelte     | 14 +++++----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/ChangelogStreamPage.svelte b/web/src/lib/components/ChangelogStreamPage.svelte
index 18b2efd..042dc68 100644
--- a/web/src/lib/components/ChangelogStreamPage.svelte
+++ b/web/src/lib/components/ChangelogStreamPage.svelte
@@ -59,9 +59,13 @@
                 >{projectPath(ref.project)}@{ref.version}</a
               >
             {/each}
-            {#each subjectTags(doc) as tag (tag)}
-              <span class="tag">{tag}</span>
-            {/each}
+            {#if subjectTags(doc).length > 0}
+              <span class="tags">
+                {#each subjectTags(doc) as tag (tag)}
+                  <span class="tag">{tag}</span>
+                {/each}
+              </span>
+            {/if}
           </p>
         </section>
       {/each}
@@ -104,11 +108,20 @@
     font-weight: 700;
   }
   /* tag chips: publisher claims in the ordinary ink register — never
-     the semantic colors, never a filter control */
+     the semantic colors, never a filter control. One wrapping cluster,
+     set off from the facts (date, refs) by a wider interval: facts
+     then claims, two registers in one rail. */
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.3rem;
+    margin-top: 0.45rem;
+  }
   .tag {
     color: var(--ink);
     border: 1px solid var(--rule);
-    padding: 0.05rem 0.45rem;
+    padding: 0.1rem 0.5rem;
     font-size: 0.8125rem;
   }
   .meta {
@@ -133,5 +146,11 @@
       gap: 0.9rem;
       margin-top: 0.75rem;
     }
+    /* in the single-row rail the wider 0.9rem column gap already
+       separates the clusters; the tags need no extra offset */
+    .tags {
+      justify-content: flex-start;
+      margin-top: 0;
+    }
   }
 </style>
diff --git a/web/src/lib/components/ReleasePage.svelte b/web/src/lib/components/ReleasePage.svelte
index 9ca477a..489685f 100644
--- a/web/src/lib/components/ReleasePage.svelte
+++ b/web/src/lib/components/ReleasePage.svelte
@@ -79,7 +79,7 @@
     <div class="main">
       {#if changelog}
         <section class="changelog">
-          <h2 class="display-sub">{changelog.title}</h2>
+          <h2 class="display-sub" class:tagged={changelogTags.length > 0}>{changelog.title}</h2>
           {#if changelogTags.length > 0}
             <p class="tags">
               {#each changelogTags as tag (tag)}
@@ -229,16 +229,20 @@
     margin-bottom: 1.25rem;
   }
   /* tag chips: publisher claims in the ordinary ink register — never
-     the semantic colors */
+     the semantic colors. The tags bind to the title they describe
+     (tight above, generous below), and the prose follows the cluster. */
+  .changelog h2.tagged {
+    margin-bottom: 0.5rem;
+  }
   .changelog .tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem;
-    margin: -0.75rem 0 1.25rem;
+    gap: 0.3rem;
+    margin-bottom: 1.25rem;
   }
   .changelog .tag {
     border: 1px solid var(--rule);
-    padding: 0.05rem 0.45rem;
+    padding: 0.1rem 0.5rem;
     font-size: 0.8125rem;
   }
   .artifacts-section {
-- 
2.51.2