diff --git a/src/components/time-series-chart/series.tsx b/src/components/time-series-chart/series.tsx index 0a04fa8c..fba23cf7 100644 --- a/src/components/time-series-chart/series.tsx +++ b/src/components/time-series-chart/series.tsx @@ -133,10 +133,10 @@ export function DowntimeBands({ drawn, padT, innerH }: DowntimeBandsProps) { ))} {all.map((b, i) => { const cx = b.x + b.w / 2; - // "● NAME DOWN" width estimate: ~5.5 px per char plus fixed - // padding for the dot and the "DOWN" suffix. + // "NAME DOWN" width estimate: ~5.5 px per char plus 14 px of + // horizontal padding (7 each side). const label = `${b.name.toUpperCase()} DOWN`; - const pillW = Math.max(58, label.length * 5.5 + 22); + const pillW = Math.max(50, label.length * 5.5 + 14); const pillY = padT + 2 + b.slot * (PILL_H + PILL_GAP); const pillX = Math.max(0, cx - pillW / 2); return ( @@ -151,16 +151,8 @@ export function DowntimeBands({ drawn, padT, innerH }: DowntimeBandsProps) { fill={b.color} opacity={0.95} /> - {/* Small circle indicator, left of the label. */} -