Allow textboxes to have width set, default to 2/3

For entering 2 or 3fa codes, we want a textbox that’s just over 6 characters
wide.

To do this, a width can now be passed to the textbox macro. The possible widths
are the same as those provided by GOV.UK Elements, and in the same format (eg
1-4, 1-2, 2-3…)

This commit also adds a new width (5em) which is suitable for 3fa codes, and
adds it to the verify page.

app/assets/stylesheets/app.scss

@@ -30,3 +30,11 @@
 a:visited {
   color: $link-colour;
 }
+
+.form-control-5em {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 5em;
+  }
+}

app/templates/components/textbox.html

@@ -1,4 +1,4 @@
-{% macro textbox(field, hint=False, highlight_tags=False, help_link=None, help_link_text=None) %}
+{% macro textbox(field, hint=False, highlight_tags=False, help_link=None, help_link_text=None, width='2-3') %}
   <div class="form-group{% if field.errors %} error{% endif %}">
     <label class="form-label" for="{{ field.name }}">
       {{ field.label }}
@@ -14,7 +14,7 @@
       {% endif %}
     </label>
     {{ field(**{
-      'class': 'form-control textbox-highlight-textbox' if highlight_tags else 'form-control',
+      'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{}'.format(width),
       'data-module': 'highlight-tags' if highlight_tags else ''
     }) }}
     {% if help_link and help_link_text %}

app/templates/views/verify.html

@@ -17,11 +17,13 @@ GOV.UK Notify | Confirm email address and mobile number
     <form autocomplete="off" method="post">
       {{ textbox(
         form.email_code,
+        width='5em',
         help_link=url_for('.check_and_resend_email_code'),
         help_link_text='I haven’t received an email'
       ) }}
       {{ textbox(
         form.sms_code,
+        width='5em',
         help_link=url_for('.check_and_resend_text_code'),
         help_link_text='I haven’t received a text'
       ) }}