Move cancel buttons alongside submit buttons

This is better because it saves vertical space for the contents of the
pop-up menu.

This commit also adds some padding to the cancel and clear buttons, to
make them easier targets to hit.

app/assets/javascripts/templateFolderForm.js

@@ -52,7 +52,7 @@
         this.selectActionButtons();
       });
 
-      state.$el.append($cancel);
+      state.$el.find('[type=submit]').after($cancel);
     };
 
     this.addClearButton = function(state) {
@@ -71,7 +71,7 @@
 
     this.makeButton = (text, fn) => $('<a></a>')
       .html(text)
-      .addClass('page-footer-js-cancel')
+      .addClass('js-cancel')
       .attr('tabindex', '0')
       .on('click keydown', event => {
         event.preventDefault();
@@ -136,7 +136,7 @@
         <button class="button-secondary" value="move-to-existing-folder">Move</button>
         <button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
         <div class="template-list-selected-counter">
-          <span class="template-list-selected-counter-count">1</span> selected &ensp;
+          <span class="template-list-selected-counter-count">1</span> selected
         </div>
       </div>
     `;

app/assets/stylesheets/components/page-footer.scss

@@ -67,6 +67,10 @@
     padding: 0.52632em 0.78947em 0.26316em 0.78947em;
   }
 
+  .js-cancel {
+    margin: 0;
+  }
+
 }
 
 .align-button-with-textbox {
@@ -86,21 +90,3 @@
   }
 
 }
-
-.page-footer-js-cancel {
-
-  text-decoration: underline;
-  color: $govuk-blue;
-  cursor: pointer;
-
-  &:hover {
-    color: $link-hover-colour;
-  }
-
-  &:focus,
-  &:active, {
-    background: $yellow;
-    color: $govuk-blue;
-    outline: 3px solid $yellow;
-  }
-}

app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

@@ -122,3 +122,26 @@
   display: block;
   margin-bottom: 5px;
 }
+
+.js-cancel {
+
+  display: inline-block;
+  padding: 10px 10px 5px 10px;
+  margin-top: -10px;
+  margin-right: -10px;
+  text-decoration: underline;
+  color: $govuk-blue;
+  cursor: pointer;
+
+  &:hover {
+    color: $link-hover-colour;
+  }
+
+  &:focus,
+  &:active, {
+    background: $yellow;
+    color: $govuk-blue;
+    outline: none;
+  }
+
+}