toolbar posit

web/plugin.head.html

@@ -10,9 +10,12 @@
         background-size: cover !important;
     }
 
+    html:not(.politictalk-direct-access-blocked) {
+        --politictalk-toolbar-bottom-offset: 12px;
+    }
+
     html:not(.politictalk-direct-access-blocked) body {
         min-height: 100vh;
-        --politictalk-toolbar-bottom-offset: 12px;
     }
 
     html:not(.politictalk-direct-access-blocked) .conference,
@@ -611,6 +614,9 @@
         function updateMobileToolbarViewportOffset() {
             if (!window.matchMedia || !window.matchMedia('(max-width: 640px)').matches) {
                 document.documentElement.style.removeProperty('--politictalk-toolbar-bottom-offset');
+                if (document.body) {
+                    document.body.style.removeProperty('--politictalk-toolbar-bottom-offset');
+                }
                 return;
             }
 
@@ -627,10 +633,7 @@
 
             window.cancelAnimationFrame(window.politicTalkToolbarOffsetFrame);
             window.politicTalkToolbarOffsetFrame = window.requestAnimationFrame(function() {
-                var toolbar = document.querySelector('.toolbox-content')
-                    || document.querySelector('.toolbox-content-wrapper')
-                    || document.querySelector('#new-toolbox')
-                    || document.querySelector('.toolbox');
+                var toolbar = getVisiblePoliticTalkToolbar();
 
                 if (!toolbar) {
                     return;
@@ -649,10 +652,45 @@
         }
 
         function setMobileToolbarBottomOffset(offset) {
-            document.documentElement.style.setProperty(
-                '--politictalk-toolbar-bottom-offset',
-                Math.max(12, offset) + 'px'
-            );
+            var value = Math.max(12, offset) + 'px';
+
+            document.documentElement.style.setProperty('--politictalk-toolbar-bottom-offset', value);
+
+            if (document.body) {
+                document.body.style.setProperty('--politictalk-toolbar-bottom-offset', value);
+            }
+        }
+
+        function getVisiblePoliticTalkToolbar() {
+            var toolbars = Array.prototype.slice.call(document.querySelectorAll(
+                '.toolbox-content, .toolbox-content-wrapper, #new-toolbox, .toolbox'
+            ));
+
+            return toolbars
+                .map(function(toolbar) {
+                    var rect = toolbar.getBoundingClientRect();
+                    var style = window.getComputedStyle(toolbar);
+
+                    return {
+                        element: toolbar,
+                        rect: rect,
+                        area: Math.max(0, rect.width) * Math.max(0, rect.height),
+                        visible: style.display !== 'none'
+                            && style.visibility !== 'hidden'
+                            && Number(style.opacity || 1) > 0
+                            && rect.width > 0
+                            && rect.height > 0
+                    };
+                })
+                .filter(function(entry) {
+                    return entry.visible;
+                })
+                .sort(function(first, second) {
+                    return second.rect.bottom - first.rect.bottom || second.area - first.area;
+                })
+                .map(function(entry) {
+                    return entry.element;
+                })[0] || null;
         }
 
         function mountMobileToolbarPositioning() {