Fixed layout shift issue when Portal popup appears

[minimaluminium]

ref DES-547

• when Portal popup is opened and the browser scroll bar is visible, it used to make layout shift, because we were hiding the scrollbar
• now it applies right margin to body element and the trigger button by calculating the scrollbar width only when the browser scroll bar is visible
• it also preservers the current right margin for those elements and makes the calculation based on that

[sagzy]

LGTM! Added a comment for a tiny optimisation, but feel free to ignore :)

[sagzy]

Small improvement idea: use clientWidth instead of creating an inner element:

    ...
    document.body.appendChild(div);
    
    const scrollbarWidth = div.offsetWidth - div.clientWidth;
    
    document.body.removeChild(div);
    ...

[minimaluminium]

Great idea! Added the optimization here.

[stromfeldt]

Thanks for this fix! I mentioned the issue a couple of years ago on the forum (along with my piss-poor fix), but it apparently couldn't be reproduced for some reason. Your code looks far superior than mine, so I'll remove my code from the sites I've inserted it into as soon as the fix goes live. :)

[minimaluminium]

@stromfeldt Your suggested solution is very simple and nice, however, the only thing with it was we still wanted to lock the vertical scrolling when the popup is open.