From aa8ff368df36fc17a0799cd8b09297f85457aaa2 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Mon, 16 Mar 2026 18:27:58 -0400
Subject: [PATCH] Roadmap: replace inline shipped descriptions with hover
 tooltip

Saves vertical space by showing only date + title in shipped rows,
with an info icon that reveals the description on hover.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/marketing/src/pages/roadmap.astro | 18 ++++++++++++++----
 apps/marketing/src/styles/global.css   | 23 +++++++++++++++++++++++
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/apps/marketing/src/pages/roadmap.astro b/apps/marketing/src/pages/roadmap.astro
index 4a11fc94a..499f4d2a3 100644
--- a/apps/marketing/src/pages/roadmap.astro
+++ b/apps/marketing/src/pages/roadmap.astro
@@ -73,10 +73,15 @@ const statusConfig = {
 
         <div class="mt-6 space-y-0">
           {shippedVisible.map((item, i) => (
-            <div class={`reveal reveal-d${i + 1} flex items-baseline gap-4 py-3 border-b border-navy-800/40`}>
+            <div class={`reveal reveal-d${i + 1} flex items-center gap-4 py-3 border-b border-navy-800/40`}>
               <span class="shrink-0 w-20 text-xs font-mono text-mint/60">{item.data.date}</span>
               <span class="font-display text-sm font-semibold text-ice-50">{item.data.title}</span>
-              <span class="text-sm text-ice-300/60 hidden sm:inline">&mdash; {item.data.description}</span>
+              <span class="shipped-info relative ml-auto shrink-0">
+                <svg class="h-4 w-4 text-ice-300/30 hover:text-ice-300/60 transition-colors cursor-help" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                  <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
+                </svg>
+                <span class="shipped-info-tip">{item.data.description}</span>
+              </span>
             </div>
           ))}
         </div>
@@ -112,10 +117,15 @@ const statusConfig = {
               <div class="min-h-0">
                 <div class="space-y-0">
                   {shippedHidden.map((item) => (
-                    <div class="flex items-baseline gap-4 py-3 border-b border-navy-800/40">
+                    <div class="flex items-center gap-4 py-3 border-b border-navy-800/40">
                       <span class="shrink-0 w-20 text-xs font-mono text-mint/60">{item.data.date}</span>
                       <span class="font-display text-sm font-semibold text-ice-50">{item.data.title}</span>
-                      <span class="text-sm text-ice-300/60 hidden sm:inline">&mdash; {item.data.description}</span>
+                      <span class="shipped-info relative ml-auto shrink-0">
+                        <svg class="h-4 w-4 text-ice-300/30 hover:text-ice-300/60 transition-colors cursor-help" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                          <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
+                        </svg>
+                        <span class="shipped-info-tip">{item.data.description}</span>
+                      </span>
                     </div>
                   ))}
                 </div>
diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css
index 87d98854c..f2b76db40 100644
--- a/apps/marketing/src/styles/global.css
+++ b/apps/marketing/src/styles/global.css
@@ -273,3 +273,26 @@
   border-color: var(--color-navy-800);
   margin: 2em 0;
 }
+
+/* Shipped feature info tooltip */
+.shipped-info-tip {
+  display: none;
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  width: 280px;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-navy-800);
+  background: var(--color-navy-900);
+  color: var(--color-ice-300);
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.5;
+  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
+  z-index: 20;
+}
+.shipped-info:hover .shipped-info-tip {
+  display: block;
+}