pitch-deck: fix HEUTE pill clipped behind milestone cards
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m6s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 31s
CI / test-python-voice (push) Successful in 27s
CI / test-bqas (push) Successful in 33s

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>
This commit is contained in:
Sharang Parnerkar
2026-04-21 11:31:23 +02:00
parent e0a3ff5ca9
commit 6b08ce6b6a

View File

@@ -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)}