From 196da0dc2dcba6acc205354579dcde01ab144135 Mon Sep 17 00:00:00 2001
From: Michal Gniadek <michal.gniadek@swmansion.com>
Date: Thu, 17 Aug 2023 12:46:32 +0200
Subject: [PATCH] [web/desktop] Make media overlay non-draggable

Summary:
[ENG-4655](https://linear.app/comm/issue/ENG-4655)

According to this [issue](https://github.com/electron/electron/issues/741), `-webkit-app-region: drag` (which is used for header dragging of the window) eats all events even for elements which defined outside of the header and just overlap with it.

The fix is to apply `-webkit-app-region: no-drag` to the multimedia overlay (we already apply it to the wordmark and navigation arrows).

Test Plan:
- Tested if clicking on the black overlay closed the image, both in inside header and outside
- Tested if close button closed the overlay, and if the cursor pointer correctly changed when hovering
- Tested if window wasn't draggable with overlay, and if it was draggable without overlay
- Tested if navigation arrows still worked (without overlay)

Reviewers: kamil, tomek, inka, patryk

Reviewed By: tomek

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D8848
---
 web/media/media.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/media/media.css b/web/media/media.css
index b0dd2be0c4..c1103aaea3 100644
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -100,6 +100,7 @@ div.multimediaModalOverlay {
   box-sizing: border-box;
   display: flex;
   justify-content: center;
+  -webkit-app-region: no-drag;
 }
 div.multimediaModalOverlay > .mediaContainer {
   display: flex;