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'