Add mode for grouping sticky elements as a dialog

We want a mode for when a single task is shared
between all sticky elements on the page and that
task has the highest priority on the page. In that
case:
- they should stack together into a single block,
  attached to the top/bottom of the viewport
- that block should adjust to the vertical space
  available

This should also adjust to the height of the
viewport, dropping whatever elements that don't
fit back into the page flow. When this happens, we
scroll the page so all the parts of the dialog are
seen together at the start of the task.

app/assets/javascripts/templateFolderForm.js

@@ -31,15 +31,6 @@
       this.states.filter(state => state.cancellable).forEach((x) => this.addCancelButton(x));
       this.states.filter(state => state.key === 'items-selected-buttons').forEach(x => this.addClearButton(x));
 
-      // add all sticky elements from states
-      this.states.forEach(state => {
-        if (state.isStickyGroup) {
-          state.$el.find(".js-stick-at-bottom-when-scrolling").each((idx, el) => {
-            GOVUK.stickAtBottomWhenScrolling.add(el, false);
-          });
-        }
-      });
-
       // first off show the new template / new folder buttons
       this.currentState = this.$form.data('prev-state') || 'unknown';
       if (this.currentState === 'unknown') {
@@ -141,7 +132,10 @@
       );
 
       // make sticky JS recalculate its cache of the element's position
-      if ('stickAtBottomWhenScrolling' in GOVUK) {
+      // use dialog mode for states which contain more than one form control
+      if (['move-to-existing-folder', 'add-new-template'].includes(this.currentState)) {
+        GOVUK.stickAtBottomWhenScrolling.recalculate({ 'mode': 'dialog' });
+      } else {
         GOVUK.stickAtBottomWhenScrolling.recalculate();
       }
     };