Form submit buttons no longer inline with inputs.

This was a cute space-saving feature at the time, but the layout made it
look like the button was specific to that input, rather than submitting
the whole form. Make similar buttons full width, and improve spacing.

1 files changed, 7 insertions, 0 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 9f8778c90..ed8ea49ec 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -893,6 +893,13 @@ input.final-submit {
   font-size: 0.8em;
 }
 
+// Most of our forms get their vertical spacing from the margin-top on labels.
+// This means the final submit button can end up uncomfortably close to the
+// bottom of the final input. Add a class of `btn--final` to fix this.
+.btn--final {
+    margin-top: 1.25em; // matches margin-top on `label`
+}
+
 .js #js-social-email-hide {
     display: none;
 }