From 46901cf3fbd38e6b6aa768cb9b480b75fd12ff61 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 13:10:23 +0300
Subject: [PATCH] style/canvas: improve context menus

---
 apps/client/src/stylesheets/style.css         |  4 +--
 .../src/stylesheets/theme-next/base.css       |  5 ++--
 .../stylesheets/theme-next/notes/canvas.css   | 30 +++++++++++++------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 64e882a02..03d1bd8ff 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -420,7 +420,7 @@ body.desktop .tabulator-popup-container,
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
 .tabulator-menu-item:hover,
-:root .excalidraw .popover .context-menu-item:hover {
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     border-color: var(--hover-item-border-color) !important;
@@ -462,7 +462,7 @@ body #context-menu-container .dropdown-item > span {
 
 .dropdown-item,
 .dropdown-header,
-:root .excalidraw .popover .context-menu-item:hover {
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 6cb12dbd7..b9db9aa10 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -152,7 +152,7 @@ body.desktop .dropdown-submenu .dropdown-menu {
 
 .dropdown-item,
 body.mobile .dropdown-submenu .dropdown-toggle,
-:root .excalidraw .popover .context-menu-item {
+:root .excalidraw .context-menu .context-menu-item {
     padding: 2px 2px 2px 8px !important;
     padding-inline-end: 22px !important;
     /* Note: the right padding should also accommodate the submenu arrow. */
@@ -206,7 +206,8 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item keyboard shortcut */
-.dropdown-item kbd {
+.dropdown-item kbd,
+.excalidraw .context-menu-item__shortcut {
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 7de1b520a..cff79acef 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -30,34 +30,46 @@
 }
 
 /* Context menus */
+
+/* Context menu - outer wrapper */
 :root .excalidraw .popover {
-    padding: 0;
     max-width: unset;
-    font-family: var(--main-font-family);
     overflow: hidden !important;
+    padding: 0;
+    font-family: var(--main-font-family);
 }
 
-:root .excalidraw .popover > * {
-    height: 100%;
+/* Context menu - inner wrapper */
+:root .excalidraw .popover > .context-menu {
     margin: 0;
-    border: none;
-    padding: 0;
-    background: transparent;
-    box-shadow: none;
     overflow-y: auto;
     overflow-x: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background: transparent;
 }
 
-:root .excalidraw .popover .context-menu-item {
+/* Context menu item */
+:root .excalidraw .context-menu .context-menu-item {
     border: 1px solid transparent;
     padding-left: 16px !important;
 }
 
+/* Context menu item keyboard shortcut */
+:root .excalidraw .context-menu-item__shortcut {
+    padding: 0;
+    opacity: 1;
+}
+
+/* Context menu separator */
 .excalidraw .context-menu .context-menu-item-separator {
     margin: 8px 0;
     opacity: 1;
 }
 
+/* Panels */
 
 .excalidraw .Island:not(.App-menu__left),
 .excalidraw .zoom-actions,