Disable draggable regions when context menu is open

stylesheets/_mixins.scss

@@ -876,3 +876,10 @@ $rtl-icon-map: (
     }
   }
 }
+
+@mixin draggable-region {
+  -webkit-app-region: drag;
+  body.context-menu-open & {
+    -webkit-app-region: no-drag;
+  }
+}

stylesheets/_titlebar.scss

@@ -10,10 +10,8 @@ body {
   // It'd be great if we could use the `:fullscreen` selector here, but that does not seem
   //   to work with Electron, at least on macOS.
   --title-bar-drag-area-height: 0px; // Needs to have a unit to work with `calc()`.
-  --draggable-app-region: initial;
   &.os-macos:not(.full-screen) {
     --title-bar-drag-area-height: calc(28px / var(--zoom-factor));
-    --draggable-app-region: drag;
   }
 
   --window-height: 100vh;

stylesheets/components/CallingScreenSharingController.scss

@@ -7,7 +7,7 @@
   justify-content: space-between;
   padding-block: 4px;
   padding-inline: 16px;
-  -webkit-app-region: drag;
+  @include draggable-region;
 
   &__text {
     @include font-body-2;

stylesheets/components/ConversationHeader.scss

@@ -32,8 +32,7 @@
     --button-spacing: 4px;
   }
 
-  -webkit-app-region: var(--draggable-app-region);
-
+  @include draggable-region;
   // In Electron v23+, clicking on a `drag` region in an unfocused window may not
   // propagate clicks to no-drag elements that have a higher CSS order; this avoids that
   // scenario for interactive elements (e.g. IncomingCallBar) which overlap the
@@ -57,56 +56,6 @@
     background-color: $color-gray-95;
   }
 
-  &__back-icon {
-    $transition: 250ms ease-out;
-
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    margin-inline-start: -20px;
-    vertical-align: text-bottom;
-    border: none;
-    opacity: 0;
-    // while it is invisible, allow it to be draggable
-    -webkit-app-region: drag;
-    transition: margin-inline-start $transition, opacity $transition;
-
-    &:disabled {
-      cursor: default;
-    }
-
-    &--show {
-      opacity: 1;
-      margin-inline: 24px 6px;
-      -webkit-app-region: no-drag;
-    }
-
-    @include light-theme {
-      @include color-svg(
-        '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-90
-      );
-    }
-    @include dark-theme {
-      @include color-svg(
-        '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-02
-      );
-    }
-
-    @include keyboard-mode {
-      &:focus {
-        background-color: $color-ultramarine;
-      }
-    }
-    @include dark-keyboard-mode {
-      &:focus {
-        background-color: $color-ultramarine-light;
-      }
-    }
-  }
-
   &__header {
     $padding: 4px 12px;
 

stylesheets/components/NavSidebar.scss

@@ -25,7 +25,7 @@
   align-items: start;
   flex-shrink: 0;
   padding-bottom: 6px;
-  -webkit-app-region: drag;
+  @include draggable-region;
 
   .NavTabs__Toggle {
     width: $NavTabs__width;

ts/components/ContextMenu.tsx

@@ -97,6 +97,21 @@ export function ContextMenu<T>({
     }
   );
 
+  // In Electron v23+, new elements added to the DOM may not trigger a recalculation of
+  // draggable regions, so if a ContextMenu is shown on top of a draggable region, its
+  // buttons may be unclickable. We add a class so that we can disable those draggable
+  // regions while the context menu is shown. It has the added benefit of ensuring that
+  // click events outside of the context menu onto an otherwise draggable region are
+  // propagated and trigger the menu to close.
+  useEffect(() => {
+    document.body.classList.toggle('context-menu-open', isMenuShowing);
+  }, [isMenuShowing]);
+
+  useEffect(() => {
+    // Remove it on unmount in case the component is unmounted when the menu is open
+    return () => document.body.classList.remove('context-menu-open');
+  }, []);
+
   useEffect(() => {
     if (onMenuShowingChanged) {
       onMenuShowingChanged(isMenuShowing);