From d4e1e90eef3dcaf743fe947d2353181750e2e02e Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Thu, 5 Jan 2023 09:55:09 +0100
Subject: [PATCH] Better solution for #826

---
 dev/External/SquireUI.js      | 13 ++++---------
 dev/Styles/User/SquireUI.less |  9 +++++++++
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/dev/External/SquireUI.js b/dev/External/SquireUI.js
index e8fa93ef1..4a1c87ef5 100644
--- a/dev/External/SquireUI.js
+++ b/dev/External/SquireUI.js
@@ -67,10 +67,8 @@ class SquireUI
 			clr = createElement('input'),
 			doClr = name => input => {
 				// https://github.com/the-djmaze/snappymail/issues/826
-				var rect = input.getBoundingClientRect();
-				clr.style.top = (rect.bottom - clr.offsetHeight) + 'px';
-				clr.style.left = rect.left + 'px';
-				clr.style.width = (rect.right - rect.left) + 'px';
+				clr.style.left = (input.offsetLeft + input.parentNode.offsetLeft) + 'px';
+				clr.style.width = input.offsetWidth + 'px';
 
 				clr.value = '';
 				clr.onchange = () => squire.setStyle({[name]:clr.value});
@@ -260,11 +258,8 @@ class SquireUI
 			browseImage = createElement('input'),
 			squire = new Squire(wysiwyg, SquireDefaultConfig);
 
-		clr.type = "color";
-		clr.style.opacity = 0;
-		clr.style.position = 'fixed';
-		clr.style.left = '-100em';
-		container.append(clr);
+		clr.type = 'color';
+		toolbar.append(clr);
 
 		browseImage.type = 'file';
 		browseImage.accept = 'image/*';
diff --git a/dev/Styles/User/SquireUI.less b/dev/Styles/User/SquireUI.less
index e7fe24dc5..5f3c762f8 100644
--- a/dev/Styles/User/SquireUI.less
+++ b/dev/Styles/User/SquireUI.less
@@ -5,9 +5,18 @@
 	overflow-x: auto;
 	overflow-y: hidden;
 	padding: 2px;
+	position: relative;
 	white-space: nowrap;
 }
 
+.squire-toolbar input[type="color"] {
+	bottom: 0;
+	left: -100em;
+	opacity: 0;
+	position: absolute;
+	width: 40px;
+}
+
 .squire-toolbar select {
 	font-size: 12px;
 	padding: 4px 1.5em 4px 6px;