[4.x] Customize Columns Modal Height Thrashing #9538
Merged
+9
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 toauto
and the calculated height of the modal gets very close to the window's inner height on the problematic zoom levels. Constraining the height to100vh
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