From 88be972d07f874328c1659b7c40e815c1a0f5a0f Mon Sep 17 00:00:00 2001
From: Amardeep <amardeepcode@gmail.com>
Date: Sat, 30 May 2026 00:12:38 +0530
Subject: [PATCH] toolbar position

---
 web/plugin.head.html | 66 +++++++++++++++++++++-----------------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/web/plugin.head.html b/web/plugin.head.html
index 7c831f7..e527112 100644
--- a/web/plugin.head.html
+++ b/web/plugin.head.html
@@ -12,6 +12,7 @@
 
     html:not(.politictalk-direct-access-blocked) {
         --politictalk-toolbar-bottom-offset: 12px;
+        --politictalk-toolbar-mobile-scale: 0.96;
     }
 
     html:not(.politictalk-direct-access-blocked) body {
@@ -498,7 +499,7 @@
 
         html:not(.politictalk-direct-access-blocked) .toolbox-content,
         html:not(.politictalk-direct-access-blocked) .toolbox-content-wrapper {
-            max-width: calc(100vw - 56px) !important;
+            max-width: calc(100vw - 24px) !important;
             pointer-events: auto !important;
         }
 
@@ -511,54 +512,25 @@
             position: fixed !important;
             right: auto !important;
             top: auto !important;
-            transform: translateX(-50%) !important;
+            transform: translateX(-50%) scale(var(--politictalk-toolbar-mobile-scale, 0.96)) !important;
+            transform-origin: bottom center !important;
             width: fit-content !important;
         }
 
         html:not(.politictalk-direct-access-blocked) .toolbox-content {
-            align-items: center !important;
             border-radius: 8px !important;
             box-sizing: border-box !important;
             bottom: auto !important;
-            display: flex !important;
-            gap: 8px !important;
-            justify-content: center !important;
             left: auto !important;
             margin-left: auto !important;
             margin-right: auto !important;
-            max-width: calc(100vw - 56px) !important;
+            max-width: calc(100vw - 24px) !important;
             overflow: visible !important;
-            padding: 8px 10px !important;
             position: relative !important;
             right: auto !important;
             top: auto !important;
             transform: none !important;
-            width: auto !important;
-        }
-
-        html:not(.politictalk-direct-access-blocked) .toolbox-content .toolbox-button,
-        html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="toolbox-button"],
-        html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="ToolboxButton"],
-        html:not(.politictalk-direct-access-blocked) .toolbox-content button,
-        html:not(.politictalk-direct-access-blocked) .toolbox-content [role="button"] {
-            flex: 0 0 48px !important;
-            height: 48px !important;
-            margin: 0 !important;
-            max-height: 48px !important;
-            max-width: 48px !important;
-            min-height: 48px !important;
-            min-width: 48px !important;
-            width: 48px !important;
-        }
-
-        html:not(.politictalk-direct-access-blocked) .toolbox-content svg,
-        html:not(.politictalk-direct-access-blocked) .toolbox-content .toolbox-icon,
-        html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="toolbox-icon"],
-        html:not(.politictalk-direct-access-blocked) .toolbox-content [class*="ToolboxIcon"] {
-            height: 24px !important;
-            max-height: 24px !important;
-            max-width: 24px !important;
-            width: 24px !important;
+            width: max-content !important;
         }
 
         .politictalk-direct-access {
@@ -648,8 +620,10 @@
         function updateMobileToolbarViewportOffset() {
             if (!window.matchMedia || !window.matchMedia('(max-width: 640px)').matches) {
                 document.documentElement.style.removeProperty('--politictalk-toolbar-bottom-offset');
+                document.documentElement.style.removeProperty('--politictalk-toolbar-mobile-scale');
                 if (document.body) {
                     document.body.style.removeProperty('--politictalk-toolbar-bottom-offset');
+                    document.body.style.removeProperty('--politictalk-toolbar-mobile-scale');
                 }
                 return;
             }
@@ -674,11 +648,17 @@
                 }
 
                 var rect = toolbar.getBoundingClientRect();
+                var currentScale = getMobileToolbarScale();
+                var unscaledWidth = currentScale ? rect.width / currentScale : rect.width;
+                var availableWidth = (viewport ? viewport.width : window.innerWidth) - 28;
+                var nextScale = Math.min(0.96, Math.max(0.86, availableWidth / unscaledWidth));
                 var visibleBottom = viewport
                     ? Math.min(window.innerHeight, viewport.offsetTop + viewport.height)
                     : window.innerHeight;
                 var overflow = Math.ceil(rect.bottom - (visibleBottom - 12));
 
+                setMobileToolbarScale(nextScale);
+
                 if (overflow > 0) {
                     setMobileToolbarBottomOffset(baseOffset + overflow);
                 }
@@ -695,6 +675,24 @@
             }
         }
 
+        function getMobileToolbarScale() {
+            var value = window.getComputedStyle(document.documentElement)
+                .getPropertyValue('--politictalk-toolbar-mobile-scale');
+            var scale = Number.parseFloat(value);
+
+            return Number.isFinite(scale) && scale > 0 ? scale : 0.96;
+        }
+
+        function setMobileToolbarScale(scale) {
+            var value = String(Math.round(scale * 1000) / 1000);
+
+            document.documentElement.style.setProperty('--politictalk-toolbar-mobile-scale', value);
+
+            if (document.body) {
+                document.body.style.setProperty('--politictalk-toolbar-mobile-scale', value);
+            }
+        }
+
         function getVisiblePoliticTalkToolbar() {
             var toolbars = Array.prototype.slice.call(document.querySelectorAll(
                 '.toolbox-content, .toolbox-content-wrapper, #new-toolbox, .toolbox'