From 50a4a55b9e05ce71c3d22dca35cb42e22f0ff468 Mon Sep 17 00:00:00 2001
From: OpenSquared <opensquaredgeneva@gmail.com>
Date: Thu, 25 Jun 2026 17:30:15 +0200
Subject: [PATCH] fix: stars higher above bars + bigger label (11px bold, 130px
 offset, capped top 30px)

---
 frontend/src/components/InstrumentChart.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/InstrumentChart.tsx b/frontend/src/components/InstrumentChart.tsx
index eaccc8a..eb0f4c3 100644
--- a/frontend/src/components/InstrumentChart.tsx
+++ b/frontend/src/components/InstrumentChart.tsx
@@ -181,34 +181,37 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
           const xCoord = chart.timeScale().timeToCoordinate(ev.date as any)
           if (xCoord === null || xCoord < 0 || xCoord > cw) continue
 
+          // Place stars at a fixed band near top of chart — never following the bars
           const highPrice = candleMap[ev.date]
-          let yBase = ch * 0.15 // fallback: top 15%
+          let yBase = 22
           if (highPrice !== undefined) {
             const yHigh = candleSeries.priceToCoordinate(highPrice)
-            if (yHigh !== null) yBase = Math.max(20, yHigh - 52)
+            // 130px above bar high, but always capped to top 30px of chart
+            if (yHigh !== null) yBase = Math.min(30, Math.max(8, yHigh - 130))
           }
 
           const cat   = ev.category ?? 'fundamental'
           const color = CAT_COLORS[cat] ?? '#94a3b8'
           const score = ev.impact_score ?? 0.5
-          const sz    = score >= 0.8 ? 15 : score >= 0.6 ? 12 : 10
+          const sz    = score >= 0.8 ? 18 : score >= 0.6 ? 15 : 12
 
           const wrap = document.createElement('div')
           wrap.style.cssText = [
             `position:absolute`, `left:${xCoord}px`, `top:${yBase}px`,
             `transform:translateX(-50%)`,
-            `display:flex`, `flex-direction:column`, `align-items:center`, `gap:1px`,
+            `display:flex`, `flex-direction:column`, `align-items:center`, `gap:2px`,
             `pointer-events:auto`, `cursor:default`,
           ].join(';')
           wrap.title = `${ev.title}\n${ev.date}${ev.end_date ? ' → ' + ev.end_date : ''}`
 
           const lbl = document.createElement('div')
           lbl.style.cssText = [
-            `font-size:8px`, `font-family:ui-monospace,monospace`,
+            `font-size:11px`, `font-family:ui-monospace,monospace`,
             `color:${color}`, `white-space:nowrap`,
-            `text-shadow:0 1px 3px #000,0 0 6px #000`,
-            `line-height:1`, `max-width:90px`,
+            `text-shadow:0 1px 4px #000,0 0 8px #000,-1px 0 4px #000,1px 0 4px #000`,
+            `line-height:1`, `max-width:110px`,
             `overflow:hidden`, `text-overflow:ellipsis`,
+            `font-weight:600`,
           ].join(';')
           lbl.textContent = ev.title.slice(0, 22)