From 6b08ce6b6a447ccccc0568c307790a70f9876a6c Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Tue, 21 Apr 2026 11:31:23 +0200
Subject: [PATCH] pitch-deck: fix HEUTE pill clipped behind milestone cards

Move pill from SVG (behind HTML) to an absolutely-positioned HTML div
with zIndex:10 so it always renders above the milestone cards.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/slides/MilestonesSlide.tsx     | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/pitch-deck/components/slides/MilestonesSlide.tsx b/pitch-deck/components/slides/MilestonesSlide.tsx
index c3a430c..9dcf748 100644
--- a/pitch-deck/components/slides/MilestonesSlide.tsx
+++ b/pitch-deck/components/slides/MilestonesSlide.tsx
@@ -393,7 +393,7 @@ function Timeline({ onSelect, selectedId, t, de }: {
             strokeDasharray={m.done ? '0' : '3 3'} />
         ))}
 
-        {/* HEUTE marker */}
+        {/* HEUTE marker — circles only; pill is HTML below */}
         <g transform={`translate(${todayX} 180)`}>
           <circle r="14" fill={t.accent} opacity=".15" />
           <circle r="9" fill={t.accent} opacity=".4">
@@ -401,15 +401,23 @@ function Timeline({ onSelect, selectedId, t, de }: {
             <animate attributeName="opacity" values=".4;.05;.4" dur="2s" repeatCount="indefinite" />
           </circle>
           <circle r="6" fill={t.heuteCore} stroke={t.accent} strokeWidth="2" filter="url(#msGlow)" />
-          <rect x="-30" y="-34" width="60" height="16" rx="8"
-            fill={t.heutePillBg} stroke={t.accent} strokeOpacity=".6" strokeWidth="1" />
-          <text y="-22" textAnchor="middle" fill={t.heuteText}
-            style={{ ...MONO, fontSize: 9.5, letterSpacing: 2.5, fontWeight: 700 }}>
-            HEUTE
-          </text>
         </g>
       </svg>
 
+      {/* HEUTE pill — HTML so it sits above milestone cards */}
+      <div style={{
+        position: 'absolute',
+        left: todayX - 30, top: 146,
+        width: 60, height: 18,
+        borderRadius: 9,
+        background: t.heutePillBg,
+        border: `1px solid ${t.accent}99`,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 10, pointerEvents: 'none',
+        ...MONO, fontSize: 9.5, letterSpacing: 2.5, fontWeight: 700,
+        color: t.heuteText,
+      }}>HEUTE</div>
+
       {layout.map((m) => (
         <MilestoneNode key={m.id} m={m} t={t} de={de}
           onClick={() => onSelect(m)}