diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 64db8e310..3fba6dad2 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -30,3 +30,11 @@ a:visited { color: $link-colour; } + +.form-control-5em { + width: 100%; + + @include media(tablet) { + width: 5em; + } +} diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 5185f910f..07f422c4a 100644 --- a/app/templates/components/textbox.html +++ b/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') %}
{{ 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 %} diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html index 9c01b596f..7d6819779 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -17,11 +17,13 @@ GOV.UK Notify | Confirm email address and mobile number
{{ 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' ) }}