fix(chart): z-index drawing canvas above lightweight-charts' own canvases#2145
Conversation
…canvases 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.
|
@0x-SquidSol is attempting to deploy a commit to the Khubair Nasir's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
2 participants
Summary
Drawings on the price chart were saving to state and localStorage correctly (the toolbar's clear-all confirmation reflected the count) but never became visible on screen. Root cause: the overlay canvas was relying on DOM order alone to stack above lightweight-charts' own canvases — both at `z-index: auto` (= 0). By spec the drawing canvas (later DOM sibling) should paint on top, and that worked in local dev / Vitest, but in production the chart container's internal stacking context wins the tie-break and lightweight-charts' canvases paint above the drawing canvas instead.
Fix
One-line change: add explicit `z-[1]` to the drawing canvas.
Test plan
🤖 Generated with Claude Code