Empty white space when browser dimensions are in high ratios.

aidanczyryca commented 1 year ago

Describe the bug An empty white space appears next to the plugin utility bar when the browser dimensions are either very wide or very tall (for example, split screening two browser windows). It appears regardless of whether one of the plugin menus is open. It is not always the same size as the menu.

To Reproduce Steps to reproduce the behavior:

Be on 'https://www.milkywayidle.com/game'
Snap browser window to half-screen or other weird dimensions.
See error

Expected behavior I didn't expect to see the plugin creating empty space.

Screenshots chrome chrome 3 firefox 3 firefox

Browser Chrome Version 113.0.5672.64 (Official Build) (64-bit) Firefox 112.0.2 (64-bit)

Additional context Other browser extensions do not seem to affect this bug. No other Tampermonkey scripts are installed or active.

Ishadijcks commented 1 year ago

Thanks for the detailed report, I can confirm this bug.

It is likely something to do with the way the Vue app is injected into the page. Via the inspector we can probably see what exactly is causing the whitespace

KevinLee3627 commented 1 year ago

From what I can tell, it seems like it's related to the transform: scale(xx) property on the #root style. If you change the height of the window you can see the media queries that affect this property.

If you disable the transform: scale(xx) properties, and set the height property to 100% it seems to look normal.

Ishadijcks commented 1 year ago

Agreed. The problem is that there are many for various breakpoints.

I'm not entirely sure why they were set, so I don't feel comfortable overriding them yet

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 1.2.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

Ishadijcks / MooLite

Empty white space when browser dimensions are in high ratios. #70