From 118ad907d83af59f3bcc390efc3bedd5d9cb5612 Mon Sep 17 00:00:00 2001
From: AriaEdo <aria.edo@gmail.com>
Date: Thu, 12 Nov 2026 21:03:28 +0700
Subject: [PATCH 1/3] fix(changelog): drop the top margin of whatever opens a
 card body

The card body only reset the top margin of a leading h2. Docs MDX entries
often open with a list, which kept the prose margin and pushed the content
~22px further from the "View on GitHub" link than paragraph-led cards.
---
 src/static/styles/components-changelog.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/static/styles/components-changelog.css b/src/static/styles/components-changelog.css
index e15ca460..e9cb3825 100644
--- a/src/static/styles/components-changelog.css
+++ b/src/static/styles/components-changelog.css
@@ -176,12 +176,12 @@
   .changelog-entry-card-body {
     @apply datum-prose-longform text-midnight-fjord min-w-0;
 
+    & > :first-child {
+      @apply mt-0;
+    }
+
     h2 {
       @apply datum-text-2xl mt-8 mb-5 font-semibold;
-
-      &:first-child {
-        @apply mt-0;
-      }
     }
 
     h3 {

From 68c4dcd8c3c32d0d924168dac7834cb6f8d0966b Mon Sep 17 00:00:00 2001
From: AriaEdo <aria.edo@gmail.com>
Date: Thu, 12 Nov 2026 21:03:31 +0700
Subject: [PATCH 2/3] feat(changelog): show the product name as the first card
 tag

The <Update> description (product name) moves from the eyebrow above the
title into the tag list, ahead of the type tags. It stays searchable since
the page search already matches tag text.
---
 src/components/changelog/Card.astro        | 13 ++++++++++---
 src/static/styles/components-changelog.css |  5 -----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/changelog/Card.astro b/src/components/changelog/Card.astro
index a637d326..0e5a20bc 100644
--- a/src/components/changelog/Card.astro
+++ b/src/components/changelog/Card.astro
@@ -19,6 +19,14 @@ function embedGithubVideos(html: string): string {
       `<video class="changelog-entry-card-video" controls preload="metadata" playsinline src="${url}"></video>`
   );
 }
+
+type EntryTag = { name: string; description?: string };
+
+// The <Update> description (product name) leads the tag list, ahead of the type tags.
+function entryTags(entry: ChangelogProps): EntryTag[] {
+  const labels = entry.labels?.nodes ?? [];
+  return entry.product ? [{ name: entry.product }, ...labels] : labels;
+}
 ---
 
 <div class="changelog-toolbar">
@@ -69,7 +77,6 @@ function embedGithubVideos(html: string): string {
             <ChangelogDot aria-hidden="true" />
           </div>
           <div class="changelog-entry-nav-content">
-            {entry.product && <span class="changelog-entry-nav-product">{entry.product}</span>}
             <h3 class="changelog-entry-nav-title">{entry.title}</h3>
             <div class="changelog-entry-nav-date-row">
               <time class="changelog-entry-nav-date">
@@ -79,9 +86,9 @@ function embedGithubVideos(html: string): string {
                   year: 'numeric',
                 })}
               </time>
-              {entry.labels && entry.labels.nodes.length > 0 && (
+              {entryTags(entry).length > 0 && (
                 <div class="changelog-entry-card-tags">
-                  {entry.labels.nodes.map((label) => (
+                  {entryTags(entry).map((label) => (
                     <div class="changelog-entry-card-tag-row">
                       <span
                         class={`changelog-entry-card-tag changelog-entry-card-tag--${label.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
diff --git a/src/static/styles/components-changelog.css b/src/static/styles/components-changelog.css
index e9cb3825..3b311bf1 100644
--- a/src/static/styles/components-changelog.css
+++ b/src/static/styles/components-changelog.css
@@ -144,11 +144,6 @@
     @apply flex min-w-0 flex-col gap-4;
   }
 
-  /* Product eyebrow above the title; -mb-2 tightens the nav-content gap to pair it with the title */
-  .changelog-entry-nav-product {
-    @apply datum-text-smallcaps text-canyon-clay -mb-2 uppercase;
-  }
-
   .changelog-entry-nav-title {
     @apply text-midnight-fjord m-0 font-semibold xl:text-(length:--30px) xl:leading-(--42px);
   }

From f1f9b36223ea7bdd27c0b46d215dd1bddc0f390d Mon Sep 17 00:00:00 2001
From: AriaEdo <aria.edo@gmail.com>
Date: Thu, 12 Nov 2026 21:12:05 +0700
Subject: [PATCH 3/3] feat(changelog): use the release date as the card kicker

With the product name now a tag, the date takes the kicker slot above the
title in the kicker style (clay smallcaps, paired with the title). The tags
move up into the date's old place under the title, and the date-row wrapper
goes away.
---
 src/components/changelog/Card.astro        | 50 ++++++++++------------
 src/static/styles/components-changelog.css |  7 +--
 2 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/src/components/changelog/Card.astro b/src/components/changelog/Card.astro
index 0e5a20bc..0261f7a6 100644
--- a/src/components/changelog/Card.astro
+++ b/src/components/changelog/Card.astro
@@ -77,34 +77,30 @@ function entryTags(entry: ChangelogProps): EntryTag[] {
             <ChangelogDot aria-hidden="true" />
           </div>
           <div class="changelog-entry-nav-content">
+            <time class="changelog-entry-nav-date">
+              {new Date(entry.createdAt).toLocaleDateString('en-US', {
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+              })}
+            </time>
             <h3 class="changelog-entry-nav-title">{entry.title}</h3>
-            <div class="changelog-entry-nav-date-row">
-              <time class="changelog-entry-nav-date">
-                {new Date(entry.createdAt).toLocaleDateString('en-US', {
-                  day: 'numeric',
-                  month: 'long',
-                  year: 'numeric',
-                })}
-              </time>
-              {entryTags(entry).length > 0 && (
-                <div class="changelog-entry-card-tags">
-                  {entryTags(entry).map((label) => (
-                    <div class="changelog-entry-card-tag-row">
-                      <span
-                        class={`changelog-entry-card-tag changelog-entry-card-tag--${label.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
-                      >
-                        {label.name}
-                      </span>
-                      {label.description && (
-                        <span class="changelog-entry-card-tag-description">
-                          {label.description}
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
+            {entryTags(entry).length > 0 && (
+              <div class="changelog-entry-card-tags">
+                {entryTags(entry).map((label) => (
+                  <div class="changelog-entry-card-tag-row">
+                    <span
+                      class={`changelog-entry-card-tag changelog-entry-card-tag--${label.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                    >
+                      {label.name}
+                    </span>
+                    {label.description && (
+                      <span class="changelog-entry-card-tag-description">{label.description}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
         </div>
 
diff --git a/src/static/styles/components-changelog.css b/src/static/styles/components-changelog.css
index 3b311bf1..81ea870e 100644
--- a/src/static/styles/components-changelog.css
+++ b/src/static/styles/components-changelog.css
@@ -148,12 +148,9 @@
     @apply text-midnight-fjord m-0 font-semibold xl:text-(length:--30px) xl:leading-(--42px);
   }
 
-  .changelog-entry-nav-date-row {
-    @apply flex flex-col gap-2;
-  }
-
+  /* Date as the kicker above the title; -mb-2 tightens the nav-content gap to pair it with the title */
   .changelog-entry-nav-date {
-    @apply datum-text-smallcaps text-app---dark---utility-3 uppercase;
+    @apply datum-text-smallcaps text-canyon-clay -mb-2 uppercase;
   }
 
   .changelog-entry-card {