Compress the country+msisdn picker down to a single line

[lampholder]

Points to note:

• flags are actually square
• country names have country codes after them to both:
  • reinforce that we're doing this for the phone number
  • allow the user to search by country code as well as country name
• the country picker and the phone number field should both be similarly styled, so that it's obvious that they are both there to be interacted with/completed
• +447700900000 is a reasonable placeholder because it is a drama range number
  • we might rethink this in future, but it's probably fine for now

[lampholder]

• helps with Password feedback is below the fold on my macbook air #3893
• avoids the sense that we're collecting user country information for no reason

[lukebarnard1]

Searching by country code does work but it doesn't strip the initial "+" if you happen to enter one. This breaks the search which assumes you haven't put a "+".

IRL @lampholder and I discussed that the dropdown can be much smaller that 50% but in practice this is a parameter that can be altered with minimal CSS anyway (once the above design is implemented). I mocked what this would like with devtools:

[lukebarnard1]

Next up:

• Actually use square flags (from https://github.com/gosquared/flags) from https://github.com/googlei18n/region-flags - Compress the country+msisdn picker down to a single line #3895
• Put the chevron on the left
• Change background colour to white