UX: moves wizard's "Finish" button to the left of back and next (#7027)

This was done to avoid clicking finish when clicking fast on next.

app/assets/javascripts/wizard/templates/components/wizard-step.hbs

@@ -32,6 +32,12 @@
       <a href {{action "quit"}} class='action-link quit' tabindex="11">{{i18n "wizard.quit"}}</a>
     {{/if}}
 
+    {{#if showFinishButton}}
+      <button class='wizard-btn finish' {{action "exitEarly"}} disabled={{saving}} tabindex="10">
+        {{i18n "wizard.finish"}}
+      </button>
+    {{/if}}
+
     {{#if showBackButton}}
       <a href {{action "backStep"}} class='action-link back' tabindex="11">{{i18n "wizard.back"}}</a>
     {{/if}}
@@ -43,12 +49,6 @@
       </button>
     {{/if}}
 
-    {{#if showFinishButton}}
-      <button class='wizard-btn finish' {{action "exitEarly"}} disabled={{saving}} tabindex="10">
-        {{i18n "wizard.finish"}}
-      </button>
-    {{/if}}
-
     {{#if showDoneButton}}
       <button class='wizard-btn done' {{action "quit"}} disabled={{saving}} tabindex="10">
         {{i18n "wizard.done"}}

app/assets/stylesheets/wizard.scss

@@ -113,6 +113,7 @@ body.wizard {
 }
 
 .wizard-step-colors {
+  max-height: 465px;
   margin-bottom: 20px;
   overflow-y: auto;
   .grid {
@@ -171,7 +172,7 @@ body.wizard {
   border: 1px solid #ccc;
 
   .wizard-step-contents {
-    min-height: 510px;
+    height: 550px;
   }
 
   .wizard-column-contents {
@@ -544,7 +545,7 @@ body.wizard {
     max-height: none;
   }
   .wizard-step-contents {
-    min-height: auto !important;
+    height: auto !important;
   }
   .wizard-step-banner {
     width: 100% !important;