style/canvas: restyle context menus

apps/client/src/stylesheets/style.css

@@ -360,7 +360,8 @@ button kbd {
 }
 
 .dropdown-menu,
-.tabulator-popup-container {
+.tabulator-popup-container,
+:root .excalidraw .popover {
     color: var(--menu-text-color) !important;
     font-size: inherit;
     background: var(--menu-background-color) !important;
@@ -372,7 +373,8 @@ button kbd {
 
 body.desktop .dropdown-menu,
 body.desktop .tabulator-popup-container,
-:root .excalidraw .dropdown-menu .dropdown-menu-container {
+:root .excalidraw .dropdown-menu .dropdown-menu-container,
+:root .excalidraw .popover {
     border: 1px solid var(--dropdown-border-color);
     column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
@@ -417,7 +419,8 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
-.tabulator-menu-item:hover {
+.tabulator-menu-item:hover,
+:root .excalidraw .popover .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;
@@ -458,7 +461,8 @@ body #context-menu-container .dropdown-item > span {
 }
 
 .dropdown-item,
-.dropdown-header {
+.dropdown-header,
+:root .excalidraw .popover .context-menu-item:hover {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }

apps/client/src/stylesheets/theme-next/base.css

@@ -97,7 +97,8 @@ body.backdrop-effects-disabled {
  * supported when this class is used.
  */
 
- .dropdown-menu:not(.static) {
+ .dropdown-menu:not(.static),
+ :root .excalidraw .popover {
     border-radius: var(--dropdown-border-radius);
     padding: var(--menu-padding-size) !important;
     font-size: 0.9rem !important;
@@ -115,7 +116,8 @@ body.mobile .dropdown-menu .dropdown-menu {
 }
 
 body.desktop .dropdown-menu::before,
-:root .ck.ck-dropdown__panel::before {
+:root .ck.ck-dropdown__panel::before,
+:root .excalidraw .popover::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
@@ -149,7 +151,8 @@ body.desktop .dropdown-submenu .dropdown-menu {
 }
 
 .dropdown-item,
-body.mobile .dropdown-submenu .dropdown-toggle {
+body.mobile .dropdown-submenu .dropdown-toggle,
+:root .excalidraw .popover .context-menu-item {
     padding: 2px 2px 2px 8px !important;
     padding-inline-end: 22px !important;
     /* Note: the right padding should also accommodate the submenu arrow. */
@@ -215,13 +218,15 @@ html body .dropdown-item[disabled] {
     margin-inline-start: 16px;
 }
 
-.dropdown-divider {
+.dropdown-divider,
+.excalidraw .context-menu hr {
     position: relative;
     border-color: transparent !important;
     overflow: visible;
 }
 
-.dropdown-divider::after {
+.dropdown-divider::after,
+.excalidraw .context-menu hr::before {
     position: absolute;
     content: "";
     top: -1px;

apps/client/src/stylesheets/theme-next/notes/canvas.css

@@ -29,6 +29,36 @@
     --floating-buttons-vert-offset: 48px;
 }
 
+/* Context menus */
+:root .excalidraw .popover {
+    padding: 0;
+    max-width: unset;
+    font-family: var(--main-font-family);
+    overflow: hidden !important;
+}
+
+:root .excalidraw .popover > * {
+    height: 100%;
+    margin: 0;
+    border: none;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+:root .excalidraw .popover .context-menu-item {
+    border: 1px solid transparent;
+    padding-left: 16px !important;
+}
+
+.excalidraw .context-menu .context-menu-item-separator {
+    margin: 8px 0;
+    opacity: 1;
+}
+
+
 .excalidraw .Island:not(.App-menu__left),
 .excalidraw .zoom-actions,
 .undo-redo-buttons {