From 9e8c8ca583a483c90c465b87356af65650caeb6a Mon Sep 17 00:00:00 2001
From: Mechiel Lukkien <mechiel@ueber.net>
Date: Thu, 28 Nov 2024 18:34:48 +0100
Subject: [PATCH] webmail: fix dragging the corner of the compose popup when
 it's on top of a message view with an iframe (for an html message)

the pointer events for moving the mouse would be consumed by the iframe. that
broke resizing of the compose popup.  we now disable pointerevents on the main
ui when we are dragging the corner of the compose popup.

this is similar to an earlier change about the draggable split bar between the
message list and the message view (when showing an html message).
---
 webmail/webmail.js | 9 +++++++--
 webmail/webmail.ts | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/webmail/webmail.js b/webmail/webmail.js
index c1c6d97..863864e 100644
--- a/webmail/webmail.js
+++ b/webmail/webmail.js
@@ -3005,9 +3005,13 @@ const compose = (opts, listMailboxes) => {
 		borderRadius: '.25em',
 		display: 'flex',
 		flexDirection: 'column',
-	}), initWidth ? style({ width: initWidth + 'px' }) : [], initHeight ? style({ height: initHeight + 'px' }) : [], dom.div(css('composeResizeGrab', { position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize' }), function mousedown(e) {
+	}), initWidth ? style({ width: initWidth + 'px' }) : [], initHeight ? style({ height: initHeight + 'px' }) : [], dom.div(css('composeResizeGrab', { position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize' }), async function mousedown(e) {
+		// Disable pointer events on the message view. If it has an iframe with a message,
+		// mouse events while dragging would be consumed by the iframe, breaking our
+		// resize.
+		page.style.pointerEvents = 'none';
 		resizeLast = null;
-		startDrag(e, (e) => {
+		await startDrag(e, (e) => {
 			if (resizeLast) {
 				const bounds = composeElem.getBoundingClientRect();
 				const width = Math.round(bounds.width + resizeLast.x - e.clientX);
@@ -3024,6 +3028,7 @@ const compose = (opts, listMailboxes) => {
 			}
 			resizeLast = { x: e.clientX, y: e.clientY };
 		});
+		page.style.pointerEvents = '';
 	}), dom.form(css('composeForm', {
 		flexGrow: '1',
 		display: 'flex',
diff --git a/webmail/webmail.ts b/webmail/webmail.ts
index 525acd5..0798c14 100644
--- a/webmail/webmail.ts
+++ b/webmail/webmail.ts
@@ -1953,9 +1953,13 @@ const compose = (opts: ComposeOptions, listMailboxes: listMailboxes) => {
 		initHeight ? style({height: initHeight+'px'}) : [],
 		dom.div(
 			css('composeResizeGrab', {position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize'}),
-			function mousedown(e: MouseEvent) {
+			async function mousedown(e: MouseEvent) {
+				// Disable pointer events on the message view. If it has an iframe with a message,
+				// mouse events while dragging would be consumed by the iframe, breaking our
+				// resize.
+				page.style.pointerEvents = 'none'
 				resizeLast = null
-				startDrag(e, (e: MouseEvent) => {
+				await startDrag(e, (e: MouseEvent) => {
 					if (resizeLast) {
 						const bounds = composeElem.getBoundingClientRect()
 						const width = Math.round(bounds.width + resizeLast.x - e.clientX)
@@ -1972,6 +1976,7 @@ const compose = (opts: ComposeOptions, listMailboxes: listMailboxes) => {
 					}
 					resizeLast = {x: e.clientX, y: e.clientY}
 				})
+				page.style.pointerEvents = ''
 			},
 		),
 		dom.form(