From bf537446092feac67de94eef534026442624dfc7 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Fri, 17 Oct 2025 16:42:19 +0300
Subject: [PATCH] style/canvas: fix arrowheads picker being improperly
 positioned

---
 .../src/stylesheets/theme-next/notes/canvas.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index a7e224720..d5fb27321 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -188,12 +188,29 @@ body[dir=rtl] .excalidraw .Island.App-menu__left {
 :root .App-menu__left > .panelColumn > fieldset,
 :root .App-menu__left > .panelColumn > label,
 :root .App-menu__left > .panelColumn > div:has(> *) {
+    position: relative;
     margin: 0;
     border-radius: 4px;
     box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
     background: var(--floating-button-background-color);
     padding: 8px 12px;
+}
+
+:root .App-menu__left > .panelColumn > fieldset::before,
+:root .App-menu__left > .panelColumn > label::before,
+:root .App-menu__left > .panelColumn > div:has(> *)::before {
+    /* backdrop: blur() creates a new stacking context that prevents some popovers like the
+     * arrowheads picker from being positioned correctly. To workaround this, the backdrop blur
+     * effect is applyed using a pseudo-element instead. */
+    display: block;
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     backdrop-filter: blur(10px) saturate(6);
+    z-index: -1;
 }
 
 /* Options panel card title */