[MM-38535] Overlay drag region with clickable area when menu is open (#1738)

src/renderer/components/MainPage.tsx

@@ -330,6 +330,7 @@ export default class MainPage extends React.PureComponent<Props, State> {
                 onCloseTab={this.handleCloseTab}
                 onDrop={this.handleDragAndDrop}
                 tabsDisabled={this.state.modalOpen}
+                isMenuOpen={this.state.isMenuOpen}
             />
         );
 

src/renderer/components/TabBar.tsx

@@ -24,6 +24,7 @@ type Props = {
     mentionCounts: Record<string, number>;
     onDrop: (result: DropResult) => void;
     tabsDisabled?: boolean;
+    isMenuOpen?: boolean;
 };
 
 function getStyle(style?: DraggingStyle | NotDraggingStyle) {
@@ -151,12 +152,15 @@ export default class TabBar extends React.PureComponent<Props> {
                     {(provided) => (
                         <Nav
                             ref={provided.innerRef}
-                            className={`TabBar${this.props.isDarkMode ? ' darkMode' : ''}`}
+                            className={classNames('TabBar', {
+                                darkMode: this.props.isDarkMode,
+                            })}
                             id={this.props.id}
                             variant='tabs'
                             {...provided.droppableProps}
                         >
                             {tabs}
+                            {this.props.isMenuOpen ? <span className='TabBar-nonDrag'/> : null}
                             {provided.placeholder}
                         </Nav>
                     )}

src/renderer/css/components/TabBar.css

@@ -9,6 +9,11 @@
   padding: 6px 8px;
 }
 
+.TabBar-nonDrag {
+  flex-grow: 1;
+  -webkit-app-region: no-drag;
+}
+
 .TabBar .teamTabItem span {
   flex: 0 1 auto;
   overflow: hidden;