From daec116aab19f80301578607adf2655c2de4c721 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Thu, 12 Feb 2026 13:54:57 +0100
Subject: [PATCH] fix svg overlay z-index

---
 src/components/SvgOverlay.tsx | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/SvgOverlay.tsx b/src/components/SvgOverlay.tsx
index 74df0de..d0d68fa 100644
--- a/src/components/SvgOverlay.tsx
+++ b/src/components/SvgOverlay.tsx
@@ -51,16 +51,16 @@ export default function SvgOverlay({
     }
   };
 
-  // Update dimensions when chart resizes
+  // Update dimensions when SVG resizes
   useEffect(() => {
-    if (!chart) return;
+    if (!svgRef.current) return;
 
     const updateDimensions = () => {
-      const container = chart.chartElement();
-      if (container) {
+      if (svgRef.current) {
+        const rect = svgRef.current.getBoundingClientRect();
         setDimensions({
-          width: container.clientWidth,
-          height: container.clientHeight,
+          width: rect.width,
+          height: rect.height,
         });
       }
     };
@@ -68,15 +68,12 @@ export default function SvgOverlay({
     updateDimensions();
 
     const resizeObserver = new ResizeObserver(updateDimensions);
-    const container = chart.chartElement();
-    if (container) {
-      resizeObserver.observe(container);
-    }
+    resizeObserver.observe(svgRef.current);
 
     return () => {
       resizeObserver.disconnect();
     };
-  }, [chart]);
+  }, []);
 
   // Subscribe to visible range changes (zoom/pan)
   useEffect(() => {
@@ -197,7 +194,7 @@ export default function SvgOverlay({
     if (activeTool === 'delete') {
       // Find line annotation near click point
       const lineAnnotations = annotations.filter((a) => a.label_type === 'line' && a.geometry);
-      
+
       for (const annotation of lineAnnotations) {
         if (!annotation.geometry) continue;
 
@@ -338,12 +335,13 @@ export default function SvgOverlay({
   return (
     <svg
       ref={svgRef}
-      width={dimensions.width}
-      height={dimensions.height}
       style={{
         position: 'absolute',
         top: 0,
         left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 1111,
         pointerEvents: activeTool === 'line' || activeTool === 'delete' ? 'auto' : 'none',
         cursor: activeTool === 'line' ? 'crosshair' : activeTool === 'delete' ? 'pointer' : 'default',
       }}