[4.x] Customize Columns Modal Height Thrashing

[JohnathonKoster]

This PR fixes #9473 by constraining the modal heights to 100% of the view height minus 1 pixel. This issue could also happen with the the Keyboard Shortcuts and Session Expiry modal windows if you really tried (I also added overflow-y-auto to the keyboards shortcut window so you could scroll and see content if you want a really short window).

The root cause seems to be inside vue-js-modal, where it gets confused when height is set to auto and the calculated height of the modal gets very close to the window's inner height on the problematic zoom levels. Constraining the height to 100vh largely fixes the issue, but a noticeable shimmer would persist at the very bottom of the modal window. Adding the - 1px got rid of this shimmering.

The easiest way I found to reproduce this bug (in all browsers I tested in) was to get the Customize Columns lists to scroll and adjust the zoom level to 90% (110% also works, but weirdly not all of them would trigger this).

Note: it's not important what causes overflow inside the modal, as long as it causes the height to be re-calculated.

height_thrashing.mp4

[duncanmcclean]

This seems to fix it for me. I was able to replicate the issue on macOS by reducing my zoom to 90%.