Marking this issue as In Progress. Overlay JS now requires the element HTML to be formatted with more generic vw-overlay- classes, rather than a list of cp- classes or random tags that might work. The following format is necessary to overlay correctly:
vw-overlay-block
-- vw-overlay-head
-- vw-overlay-form
-- -- vw-overlay-scrollable
-- -- -- vw-overlay-ctrl-row
-- -- -- -- vw-overlay-controls (optional)
-- -- vw-overlay-buttons
vw-overlay-block defines the container element of the overlay HTML. This is not the same as the vw-overlay element that the class uses more like a window container.
vw-overlay-head usually defines heading tags but it can really be any block HTML.
vw-overlay-form usually defines a physical form element
vw-overlay-scrollable defines the form controls or the real content of the overlay. This section will be compressed with a vertical scrollbar so that the entire overlay can fit it the browser window at one time.
vw-overlay-ctrl-row should be used on blocks within the scrollable element. It allows horizontal compression within the element to account for the extra width required by the scrollbar.
vw-overlay-controls (optional) should wrap the actual inputs within the vw-overlay-ctrl-row (e.g. if the inputs are in a right-hand column beside the labels).
vw-overlay-buttons defines the block containing form submission and/or cancel buttons.
vw-overlay-block, vw-overlay-head (and its children), vw-overlay-form, and vw-overlay-scrollable should not have vertical margins. Use padding instead. Margins on these elements can prevent the overlay from centering in the browser window.
vw-overlay-buttons is allowed a vertical margin on the top of the element.
Except for vw-overlay-controls, each overlay should utilize all of the classes, conforming to the hierarchy above. Doing otherwise can lead to an undesired appearance.