bugfix: move the emoji picker into the document body so it's well placed

src/plugins/sib-reactions.js

@@ -260,8 +260,9 @@ converse.plugins.add('sib-reactions', {
           });
         });
 
-        // Append picker to the message
-        this.appendChild(picker);
+        // Append picker to the document
+        // Note: It must be the body since the shadowRoot is misplaced when switching room (?)
+        document.body.appendChild(picker);
 
         // Position the emoji picker according to the current target
         // TODO: Clean this part, maybe look for a lib that does the job
@@ -272,19 +273,8 @@ converse.plugins.add('sib-reactions', {
         let rectTop = tr.top + window.pageYOffset - docEl.clientTop;
         let rectLeft = tr.left + window.pageXOffset - docEl.clientLeft;
 
-        // Fix the position if contained in a shadowRoot
-        // TODO: Should iterate through all the parent instances
-        const root = _converse.root;
-        if (root.nodeType === 11) {
-          const rcr = root.getRootNode().host?.getBoundingClientRect();
-          if (rcr) {
-            rectLeft -= rcr.left;
-            rectTop -= rcr.top;
-          }
-        }
-
         picker.style.position = 'fixed';
-        picker.style.zIndex = '999';
+        picker.style.zIndex = '9999';
         picker.style.margin = '10px';
         picker.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
         picker.style.borderRadius = '3px';
@@ -294,7 +284,7 @@ converse.plugins.add('sib-reactions', {
         if (window.innerWidth - (rectLeft + tr.width) > pr.width) {
           picker.style.left = `${rectLeft + tr.width}px`;
         } else {
-          picker.style.right = `${rectLeft}px`;
+          picker.style.right = `${window.innerWidth - rectLeft}px`;
         }
 
         // Add an offset so it's a bit higher than the