jtraub
commented
2 years ago @Nitrino hey, sorry I totally forgot to share my fix
First of all, only Firefox is affected by this issue. It happens due to the fact that ::-webkit-scrollbar pseudo-element is not supported in the browser.
Basically scrollbar width in Firefox can be either normal or thin (see scrollbar-width property supported only by Firefox) but even with these values actual width depends on platform and applied window manager theme. For example I am using Linux and thin scrollbar in my current theme has width of 4px but another theme that I sometimes switch to offers thin scrollbars with width of 7px, I think.
The idea behind the fix is to detect that the extension is running in Firefox (using technique described in https://stackoverflow.com/a/9851769/471899 because detection through user agent is not reliable) and then measure scrollbar width by inserting an empty div with a scrollbar into the DOM. After that I update padding-right on #easysubs .easysubs-translate-alternative to make sure it can take the scrollbar. CSS custom properties were used to accommodate design/element tree changes in the future releases.
Feel free to copy the code if you find my first attempt to write ts acceptable :-)
Before applying the fix to 1.5.6
After
Nitrino
Sometimes horizontal scrollbar appears in the translation popup. I believe this happens when vertical scrollbar is present in the popup.
While vertical space is a scarce resource on modern screens horizontal space is not so scarce so I think we should avoid horizontal scrollbar as it makes it harder to use the extension.
P.S. I can take a look into the problem over the weekend if you want