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
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:
@@ -393,7 +393,7 @@ function Timeline({ onSelect, selectedId, t, de }: {
|
|||||||
strokeDasharray={m.done ? '0' : '3 3'} />
|
strokeDasharray={m.done ? '0' : '3 3'} />
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{/* HEUTE marker */}
|
{/* HEUTE marker — circles only; pill is HTML below */}
|
||||||
<g transform={`translate(${todayX} 180)`}>
|
<g transform={`translate(${todayX} 180)`}>
|
||||||
<circle r="14" fill={t.accent} opacity=".15" />
|
<circle r="14" fill={t.accent} opacity=".15" />
|
||||||
<circle r="9" fill={t.accent} opacity=".4">
|
<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" />
|
<animate attributeName="opacity" values=".4;.05;.4" dur="2s" repeatCount="indefinite" />
|
||||||
</circle>
|
</circle>
|
||||||
<circle r="6" fill={t.heuteCore} stroke={t.accent} strokeWidth="2" filter="url(#msGlow)" />
|
<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>
|
</g>
|
||||||
</svg>
|
</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) => (
|
{layout.map((m) => (
|
||||||
<MilestoneNode key={m.id} m={m} t={t} de={de}
|
<MilestoneNode key={m.id} m={m} t={t} de={de}
|
||||||
onClick={() => onSelect(m)}
|
onClick={() => onSelect(m)}
|
||||||
|
|||||||
Reference in New Issue
Block a user