From 33a21735e6e51a3e177996860d23604a75166ea0 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 11:54:59 +0200
Subject: [PATCH] style(banner): give the dispatch banner room to read as an
 invitation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three changes to <LatestDispatchBanner>:

- Padding: 22/26 → 28/26 — extra top weight stops the eyebrow + title
  feeling stuck to the card edge.
- Excerpt: the previous nowrap + text-overflow: ellipsis clamp was
  truncating mid-sentence. Replaced with -webkit-line-clamp: 2 so a
  real sentence (and a half) renders. line-height 1.55, font-size
  bumped 12 → 13 to match the longer reading rhythm.
- Kind pill next to the title, same pattern as the home-page dispatch
  byline pill: 9px tracked uppercase, 2/8 padding, 3px radius, kind-
  pigment-tinted background at 10% opacity. Wraps below the title on
  narrow widths via flex-wrap on .b-title-row.

Banner margin-bottom (set on /roadmap.astro) stays at 56px for now;
the spec's reduction to 40px is conditional on the In motion strip
landing, which is the commit after next.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/LatestDispatchBanner.astro | 40 +++++++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/LatestDispatchBanner.astro b/src/components/LatestDispatchBanner.astro
index ed74b37..227b6c2 100644
--- a/src/components/LatestDispatchBanner.astro
+++ b/src/components/LatestDispatchBanner.astro
@@ -3,6 +3,7 @@ import Avatar from './Avatar.astro';
 import { getLatestPublishedDispatches } from '../lib/db';
 import {
   dispatchSlug, dispatchExcerptParas, relativeTime,
+  dispatchKindLabel, dispatchKindPigment,
 } from '../lib/format';
 
 const [latest] = getLatestPublishedDispatches(1);
@@ -21,7 +22,12 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
     </div>
 
     <div class="b-mid">
-      <span class="b-title">{latest.title}</span>
+      <div class="b-title-row">
+        <span class="b-title">{latest.title}</span>
+        <span class="b-kind-pill" style={`--pill: ${dispatchKindPigment(latest.kind)}`}>
+          {dispatchKindLabel(latest.kind)}
+        </span>
+      </div>
       <span class="b-excerpt">{excerpt}</span>
     </div>
 
@@ -38,7 +44,7 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
     grid-template-columns: auto 1fr auto;
     gap: 20px;
     align-items: center;
-    padding: 22px 26px;
+    padding: 28px 26px 26px;
     background: var(--surface-card);
     border: 0.5px solid var(--surface-card-border);
     border-radius: 12px;
@@ -70,19 +76,39 @@ const excerpt = latest ? dispatchExcerptParas(latest).lead : '';
     white-space: nowrap;
   }
 
-  .b-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+  .b-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+  .b-title-row {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
   .b-title {
     font-family: var(--font-serif);
     font-size: 19px;
     line-height: 1.3;
     color: var(--on-surface);
   }
-  .b-excerpt {
-    font-size: 12px;
-    color: var(--on-surface-variant);
+  .b-kind-pill {
+    background: color-mix(in oklab, var(--pill) 10%, transparent);
+    color: var(--pill);
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-family: var(--font-sans);
+    font-size: 9px;
+    letter-spacing: var(--tracking-wider);
+    font-weight: 600;
+    text-transform: uppercase;
     white-space: nowrap;
+  }
+  .b-excerpt {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--on-surface-variant);
   }
 
   .b-right {