Add some letter spacing to two factor textbox

Entering, or reading back sequences of digits is easier when they’re a
bit more spaced out.

This is because we read words as shapes, but read numbers
digit-by-digit.

So this commit adjusts the tracking of the type to put a bit more space
in for textboxes that are going to accept digits.

app/assets/stylesheets/components/textbox.scss

@@ -54,3 +54,8 @@
 .textbox-right-aligned {
   text-align: right;
 }
+
+.extra-tracking .form-control {
+  padding-left: 5px;
+  letter-spacing: 0.04em;
+}

app/templates/views/register-from-invite.html

@@ -14,7 +14,9 @@ Create an account
     <p>Your account will be created with this email: {{email_address}}</p>
     <form method="post" autocomplete="off">
       {{ textbox(form.name, width='3-4') }}
-      {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      <div class="extra-tracking">
+        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      </div>
       {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
       {{ page_footer("Continue") }}
       {{form.service}}

app/templates/views/register.html

@@ -14,7 +14,9 @@ Create an account
     <form method="post" novalidate>
       {{ textbox(form.name, width='3-4') }}
       {{ textbox(form.email_address, hint="Must be from a government organisation", width='3-4', safe_error_message=True) }}
-      {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      <div class="extra-tracking">
+        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+      </div>
       <input class="visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
       {{ textbox(form.password, hint="At least 8 characters", width='3-4') }}
       {{ page_footer("Continue") }}

app/templates/views/send-test.html

@@ -16,7 +16,7 @@
 
   <form method="post" class="js-stick-at-top-when-scrolling" data-module="autofocus" autocomplete="off">
     <div class="grid-row">
-      <div class="column-two-thirds">
+      <div class="column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
         {{ textbox(
           form.placeholder_value,
           hint='Optional' if optional_placeholder else None,

app/templates/views/two-factor.html

@@ -15,7 +15,7 @@
 
     <p>We’ve sent you a text message with a security code.</p>
 
-    <form autocomplete="off" method="post">
+    <form autocomplete="off" method="post" class="extra-tracking">
       {{ textbox(
         form.sms_code,
         width='5em',