cms
cms copied to clipboard
[4.x] Customize Columns Modal Height Thrashing
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.
https://github.com/statamic/cms/assets/5232890/dd14c475-8a3a-42b2-9ca8-59f18bc4f8f3