update mobile toolbar formatting + window cropping

[emillipede]

as a:
mobile user

when I:
view the map

I want to:
see the labels "zoom to location" and "group by"

there are a few overlapping problems described in this issue.

labels:

• the labels are not fully visible on most mobile phones
• on my phone, "zoom to location" is stacked into two rows

buttons and address bar:

• the buttons and address bar are not at the same height (not aligned)
• on some displays, the buttons and address bar stick out below the toolbar (in mobile view, reduce toolbar white space #245)
• the "species" and "family" buttons change size when they are selected and unselected and have irregular borders (see screenshot)
• a gap sometimes appears between the two buttons (see screenshot)
• the buttons have more padding than they do in the zeplin design (they become very wide on large mobile phones).
• whenever extra width is available, the address bar should expand (not the width of the buttons)

mini/preview sidebar:

• like the top of the page, the bottom of the page is also cropped. the photo and "view details" button are partially obscured (improve mobile display preview window #244)
• when the preview bar is resized, the image, close button, and text don't adjust as a unit (they sometimes overlap) (reformat close buttons #186)
• the preview sidebar also looks a little taller than in the zeplin (in the mock up, it's 120px high, 18% of the window height)

zeplin:

current site: