diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
index 8de95d9b3b2a..ab9d420f949c 100644
--- a/src/components/Modal/BaseModal.js
+++ b/src/components/Modal/BaseModal.js
@@ -198,7 +198,6 @@ function BaseModal({
             <View
                 style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
                 ref={forwardedRef}
-                nativeID="no-drag-area"
             >
                 {children}
             </View>
diff --git a/src/components/Pressable/GenericPressable/index.js b/src/components/Pressable/GenericPressable/index.js
index 859552e10cf3..65fca85bc324 100644
--- a/src/components/Pressable/GenericPressable/index.js
+++ b/src/components/Pressable/GenericPressable/index.js
@@ -14,7 +14,8 @@ const WebGenericPressable = forwardRef((props, ref) => (
         aria-label={props.accessibilityLabel}
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}
-        nativeID={props.nativeID || 'no-drag-area'}
+        nativeID={props.nativeID}
+        dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false})}}
     />
 ));
 
diff --git a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
index 75a5a1f514f7..abdc10180252 100644
--- a/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
+++ b/src/libs/Navigation/AppNavigator/createResponsiveStackNavigator/ThreePaneView.js
@@ -64,12 +64,25 @@ function ThreePaneView(props) {
                                 StyleUtils.displayIfTrue(props.state.index === i),
                             ]}
                         >
-                            <PressableWithoutFeedback
-                                style={[styles.flex1]}
-                                onPress={() => props.navigation.goBack()}
-                                accessibilityLabel={translate('common.close')}
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            />
+                            <View style={[styles.flex1, styles.flexColumn]}>
+                                {/* In the latest Electron version buttons can't be both clickable and draggable. 
+                                    That's why we added this workaround. Because of two Pressable components on the desktop app 
+                                    we have 30px draggable ba at the top and the rest of the dimmed area is clickable. On other devices,
+                                    everything behaves normally like one big pressable */}
+                                <PressableWithoutFeedback
+                                    style={[styles.draggableTopBar]}
+                                    onPress={() => props.navigation.goBack()}
+                                    accessibilityLabel={translate('common.close')}
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                />
+                                <PressableWithoutFeedback
+                                    style={[styles.flex1]}
+                                    onPress={() => props.navigation.goBack()}
+                                    accessibilityLabel={translate('common.close')}
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    noDragArea
+                                />
+                            </View>
                             <View style={styles.rightPanelContainer}>{props.descriptors[route.key].render()}</View>
                         </View>
                     );
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 696a8f72a73e..74994e4dc9d0 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -138,7 +138,7 @@ function HeaderView(props) {
     return (
         <View
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
-            nativeID="drag-area"
+            dataSet={{dragArea: true}}
         >
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index e54db8b2892d..b81bd5df647a 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -161,7 +161,7 @@ class SidebarLinks extends React.PureComponent {
             <View style={[styles.flex1, styles.h100]}>
                 <View
                     style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]}
-                    nativeID="drag-area"
+                    dataSet={{dragArea: true}}
                 >
                     <Header
                         title={
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 3907616cf3b4..d6258da62cbc 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3876,6 +3876,10 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         marginRight: 4,
     },
+    draggableTopBar: {
+        height: 30,
+        width: '100%',
+    },
 };
 
 export default styles;
diff --git a/web/index.html b/web/index.html
index ea8cce7a6918..c95a27e7219a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -42,11 +42,12 @@
            overscroll-behavior: none;
            touch-action: none;
         }
-        #drag-area {
+        [data-drag-area='true'] {
             -webkit-app-region: drag;
         }
-        #no-drag-area {
+        [data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] {
             -webkit-app-region: no-drag;
+
         }
         input::placeholder {
             user-select: none;
@@ -132,7 +133,7 @@
     <% } %>
 </head>
 <body>
-    <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" id="drag-area"></div>
+    <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" data-drag-area="true"></div>
     <div id="root"></div>
     <div id="splash">
         <div class="splash-logo">