Hit target on menu buttons is too small for mobile

[jasongrlicky]

Hi there! I just had a really hard time hitting the menu items at the top of the page on my iPhone and was curious about why.

Looking for the reason, I noticed that the style for the menu bar uses margins instead of padding to separate the elements, which creates a "dead zone" in between each of the buttons where clicking in that area doesn't do anything. In general, this is not the type of thing that is useful, since if someone is attempting to click/tap anything up there, they are almost definitely attempting to use a button. Because of this, we can assume that they don't want their not-100%-accurate click/tap to do nothing

I believe this could be remedied by swapping out the margins here for padding. If there is a reason these are margins instead of padding, just let me know, but otherwise I can send in a pull request.

A smaller related UX bug is that there is a whitespace node in between each menu item. Even with the padding switch above, this creates a tiny dead zone in between each button. Removing this whitespace node would be one fix, but also setting the font size to 0 on the .left-buttons class seems to fix it without affecting the rendering when there is no CSS applied. Again, just let me know if there are any reasons against this, and if not I can send in a PR!

Thanks so much for the great tool!

[mattico]

I would happily accept a PR for this!

[jasongrlicky]

Hey @mattico, thanks for fixing this so quickly! That's gonna be great! 👏