toolbar posi

web/plugin.head.html

@@ -12,6 +12,7 @@
 
     html:not(.politictalk-direct-access-blocked) body {
         min-height: 100vh;
+        --politictalk-toolbar-bottom-offset: 12px;
     }
 
     html:not(.politictalk-direct-access-blocked) .conference,
@@ -480,9 +481,10 @@
 
         html:not(.politictalk-direct-access-blocked) #new-toolbox,
         html:not(.politictalk-direct-access-blocked) .toolbox {
-            bottom: 0 !important;
-            height: 0 !important;
+            bottom: var(--politictalk-toolbar-bottom-offset, 12px) !important;
+            height: auto !important;
             left: 0 !important;
+            overflow: visible !important;
             pointer-events: none !important;
             position: fixed !important;
             right: 0 !important;
@@ -498,12 +500,10 @@
         }
 
         html:not(.politictalk-direct-access-blocked) .toolbox-content-wrapper {
-            align-items: flex-end !important;
-            bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
-            display: flex !important;
-            justify-content: center !important;
+            bottom: var(--politictalk-toolbar-bottom-offset, 12px) !important;
+            display: block !important;
             left: 50% !important;
-            min-height: 84px !important;
+            min-height: 0 !important;
             position: fixed !important;
             right: auto !important;
             top: auto !important;
@@ -517,7 +517,7 @@
             margin-left: auto !important;
             margin-right: auto !important;
             max-width: calc(100vw - 20px) !important;
-            position: static !important;
+            position: relative !important;
             right: auto !important;
             top: auto !important;
             transform: none !important;
@@ -608,6 +608,75 @@
             });
         }
 
+        function updateMobileToolbarViewportOffset() {
+            if (!window.matchMedia || !window.matchMedia('(max-width: 640px)').matches) {
+                document.documentElement.style.removeProperty('--politictalk-toolbar-bottom-offset');
+                return;
+            }
+
+            var viewport = window.visualViewport;
+            var bottomGap = 0;
+
+            if (viewport) {
+                bottomGap = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
+            }
+
+            var baseOffset = Math.round(bottomGap + 12);
+
+            setMobileToolbarBottomOffset(baseOffset);
+
+            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');
+
+                if (!toolbar) {
+                    return;
+                }
+
+                var rect = toolbar.getBoundingClientRect();
+                var visibleBottom = viewport
+                    ? Math.min(window.innerHeight, viewport.offsetTop + viewport.height)
+                    : window.innerHeight;
+                var overflow = Math.ceil(rect.bottom - (visibleBottom - 12));
+
+                if (overflow > 0) {
+                    setMobileToolbarBottomOffset(baseOffset + overflow);
+                }
+            });
+        }
+
+        function setMobileToolbarBottomOffset(offset) {
+            document.documentElement.style.setProperty(
+                '--politictalk-toolbar-bottom-offset',
+                Math.max(12, offset) + 'px'
+            );
+        }
+
+        function mountMobileToolbarPositioning() {
+            updateMobileToolbarViewportOffset();
+
+            window.addEventListener('resize', updateMobileToolbarViewportOffset, { passive: true });
+            window.addEventListener('orientationchange', updateMobileToolbarViewportOffset, { passive: true });
+
+            if (window.visualViewport) {
+                window.visualViewport.addEventListener('resize', updateMobileToolbarViewportOffset, { passive: true });
+                window.visualViewport.addEventListener('scroll', updateMobileToolbarViewportOffset, { passive: true });
+            }
+
+            var attempts = 0;
+            var interval = window.setInterval(function() {
+                attempts += 1;
+                updateMobileToolbarViewportOffset();
+
+                if (attempts >= 40) {
+                    window.clearInterval(interval);
+                }
+            }, 250);
+        }
+
         function isIgnoredJitsiPath(path) {
             return /^\/(?:static|images|libs|css|sounds|fonts|transcripts)\//.test(path);
         }
@@ -996,12 +1065,14 @@
                 mountPoliticTalkLogo();
                 mountDirectAccessMessage();
                 mountHostHangupPolicy();
+                mountMobileToolbarPositioning();
             });
         } else {
             mountPoliticTalkDocumentTitle();
             mountPoliticTalkLogo();
             mountDirectAccessMessage();
             mountHostHangupPolicy();
+            mountMobileToolbarPositioning();
         }
     }());
 </script>