From f5e92b6627a51f0841a607b8e57bce3e09a5764c Mon Sep 17 00:00:00 2001
From: 0X-SquidSol <david.laszczynski@gmail.com>
Date: Wed, 6 May 2026 12:29:54 -0400
Subject: [PATCH] fix(chart): z-index the drawing canvas above
 lightweight-charts' own canvases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drawings were saving to state and localStorage correctly, the
toolbar's clear-all confirmation reflected the drawing count, but
the drawings never became visible on the chart. The overlay was
relying on DOM order alone to stack above lightweight-charts'
canvases (the canvas was rendered after the chart container, both
at z-index auto, so by spec the drawing canvas should paint on
top). That worked in local dev but broke in production — most
likely the chart container's internal stacking context (it's
positioned via lightweight-charts' table layout) wins the
stacking-order tie-break with z-auto siblings under some
combinations of contain:paint and the inset-0 absolute positioning,
and the chart canvases paint above the drawing canvas instead.

Fix: explicit z-[1] on the drawing canvas. Sits above the chart's
own canvases (which paint at z-auto) and below the z-10 UI badges
(empty-state overlay, hover-tooltip, position-summary, drawing
toolbar). pointer-events stays disabled so chart pan/zoom keeps
working through this layer.

Tests: 64/64 ChartDrawingOverlay tests passing.
---
 app/components/trade/ChartDrawingOverlay.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/components/trade/ChartDrawingOverlay.tsx b/app/components/trade/ChartDrawingOverlay.tsx
index eb7bf2c1..3cf01b9b 100644
--- a/app/components/trade/ChartDrawingOverlay.tsx
+++ b/app/components/trade/ChartDrawingOverlay.tsx
@@ -813,7 +813,18 @@ export const ChartDrawingOverlay: FC<ChartDrawingOverlayProps> = ({
   return (
     <canvas
       ref={canvasRef}
-      className="pointer-events-none absolute inset-0"
+      // z-[1] forces the drawing canvas above lightweight-charts'
+      // own canvases (which paint at z-index auto / 0). The earlier
+      // implementation relied on DOM order alone — that worked in
+      // local dev but in production lightweight-charts' chart
+      // container wins the stacking-order tie-break and paints on
+      // top of the drawing canvas, so committed drawings save
+      // correctly to localStorage and update state but never become
+      // visible. z-[1] sits below the z-10 UI badges (empty-state,
+      // hover-tooltip, position-summary) and above the chart's
+      // canvases. pointer-events stays disabled so chart pan/zoom
+      // still works through this layer.
+      className="pointer-events-none absolute inset-0 z-[1]"
       aria-hidden="true"
     />
   );