CSS to fix Tampermonkey extension popup menu auto-size bug
-
Tampermonky's popup menu auto-size have been very buggy recently, so I temporary patch it with CSS until the dev fixed it. It's not a perfect solution, but it will work in most website which trigger this bug.
.extension-popup.top > webview[src="chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/action.html"] {min-width: 136%; min-height: 600px;}
That's all. Hope this is helpful to anyone affected by this bug.
-
@dude99
Thank you very much! -
Interesting
I'll try this to the next extension which show a broken popup for whatever reason -
@Hadden89 Use Dev tool > inspect on the extension button to get the extension's details you need, the popup menu is the last element > webview:
Enjoy!
-
@dude99 Nice I was trying it with cookie autodelete and it partially work. However is a more complicate popup, and seems that playing with height/width don't allow scaling (my UI is 85% and the extension popup is still "painted" like the UI were at 100%, so veeeeeeery big).
-
@Hadden89 Try use
transform:scale(.8);
&transform-origin: top left;
to anchor the webview inside the div.extension-popup. -
@dude99 I tried, scale corrupt the whole popup, which is fun, as translate work perfectly
-
@Hadden89 Then try go to vivaldi://settings/content/zoomLevels, reset the extension's page zoom. Might need to restart extension to take effect.
-
@dude99 Interesting.. didn't know the ext. were listed there, was on 72% which is an UI scale dropped time ago.
-
//edit: adopting a better workaround now.
-
@Hadden89 Nice. Today I learn something for variable width, you can try
width: min(115%, 800px)
orwidth: max(115%, 350px)
to have the popup menu's width changes size according to the content's width. It might able to help you on popmenu with various width. You can also dowidth: max(min(115%, 800px), 350px)
, it's pretty crazy... LOL -
The master bug to this specific issue is VB-39040 - Some popups are broken when UI is <100%.
Extensions on which I see/saw the issue:
- Bitwarden (depends on Windows UI scaling too)
- Cookie Autodelete
- ClearUrls
Nooboss(fixed by devs)- SimpleExtManager (and other minor extension managers)
Tampermonkey(fixed by devs)
-
@Hadden89 A better approach. Just set 10-11px in CAD settings for popup and should be almost usable.
Px values could be different according to Vivaldi UI size./* Crazy VB-39040 workaround for CAD */ .extension-popup.top > webview[src="chrome-extension://fhcgjolkccmbidfldomjliifgaodjagh/popup/popup.html"] { min-width: 640px; min-height: 402px; /* Set the minimum extension popup size should have */ max-width: 1000px; max-height: 1200px; /* Set the maximum extension popup size should have */ transform: top-left; /* Preserve clickability outside the popup in most cases */ }
-
@Hadden89 u can use
left:unset;
to replacetransform
method to always anchor the popup at the top right corner regardless of width.Optionally, add
box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 8px rgba(0, 0, 0, 0.25);
to make the popup look natural like other non mod popup, but it might not work with all cases. -
@dude99 Tnx. I'll try these too. The nasty part of CAD it has two sizes according to its status (whitelisted or not) and trip Vivaldi popup handling. But I'm quite happy is now working on a presumed unsupported browser: no cookie was mis-erased and even hated (unwanted) service workers are gone to the hell.
//edit: Yeah, the
box-shadow
- but alsoleft: unset
- seems to confuse the blacklisted status/size (red icon) showing the glitched popup (with transform "only" the blacklisted status is misaligned). But more test is need here.Honestly, I don't even use its popup too much, but the fact it "locked" the access to (right) tab bar or the webpage content, or showed a useless white square, triggered me too much I dropped the extension for years.
-
@Hadden89 Just ignore this if the popup is working fine | Vivaldi UI 70% - Extension: ClearUrls.
Same as CAD for me, the bug disappear when the UI is at 100% but the popup have only one size and thus is easier to fix. As always, these tricks are not universal and could heavily depend on your v-settings..extension-popup.top > webview[src="chrome-extension://lckanjgmijmafbedllaakclkaicjfmnk/html/popup.html"] { min-width: 200px; min-height: 650px; /* Set the minimum extension popup should get */ transform: top-left; transform: translatex(-100px); /* Fix clickability outside the popup */ }
-
This post is deleted! -
Ppafflick moved this topic from Modifications on