<%
  input_label ||= t("coronavirus_local_restrictions.lookup.input_label")
  input_value ||= nil
  input_error ||= nil
  hint_text ||= t("coronavirus_local_restrictions.lookup.hint_text")
  button_text ||= t("coronavirus_local_restrictions.lookup.button_text")
  link ||= { text: t("coronavirus_local_restrictions.royal_mail_lookup.link_text"), href: t("coronavirus_local_restrictions.royal_mail_lookup.href")}
%>
<div class="postcode-lookup">
    <%= render "govuk_publishing_components/components/input", {
          id: "postcodeLookup",
          label: {
            text: input_label
          },
          heading_size: "s",
          error_message: input_error,
          value: input_value,
          name: "postcode-lookup",
          hint: hint_text,
          invalid: input_error ? 'true' : 'false',
          autocomplete: "postal-code",
        } %>
    <%= render "govuk_publishing_components/components/button", text: button_text, margin_bottom: true %>
    <%= tag.p link_to(
      link[:text],
      link[:href],
      class: "govuk-link covid__postcode-lookup--link"),
      class: "govuk-body" %>
</div>

<%
  input_label ||= t("coronavirus_local_restrictions.lookup.input_label")
  input_value ||= nil
  input_error ||= nil
  hint_text ||= t("coronavirus_local_restrictions.lookup.hint_text")
  button_text ||= t("coronavirus_local_restrictions.lookup.button_text")
  link ||= { text: t("coronavirus_local_restrictions.royal_mail_lookup.link_text"), href: t("coronavirus_local_restrictions.royal_mail_lookup.href")}
%>
<div class="postcode-lookup">
    <%= render "govuk_publishing_components/components/input", {
          id: "postcodeLookup",
          label: {
            text: input_label
          },
          heading_size: "s",
          error_message: input_error,
          value: input_value,
          name: "postcode-lookup",
          hint: hint_text,
          invalid: input_error ? 'true' : 'false',
          autocomplete: "postal-code",
          width: 10,
        } %>
    <%= render "govuk_publishing_components/components/button", text: button_text, margin_bottom: true %>
    <%= tag.p link_to(
      link[:text],
      link[:href],
      class: "govuk-link covid__postcode-lookup--link"),
      class: "govuk-body" %>
</div>

Add a custom width 10 to postcode input
Add a custom width 10 to postcode input

Make the postcode input field smaller

Makes it clearer users should just enter a postcode rather than the place name

https://trello.com/c/PQvIF0If/859-make-postcode-input-field-smaller
