Fix keyboard navigation on snapshot page

Commit 0843a604ba made the entire snapshot card clickable (awesome!) but
unfortunately broke keyboard navigation on the snapshot page. I can't
blame anyone, the js is fragile for DOM changes. We should probably
introduce some js (Jasmine?) specs, but I'll wait some more for that.
Make snapshot review panel one line

By turning the review panel on the snapshot page to a one-sidescroll
container, we save space when the list of snapshots under review is
long.
Auto-scroll to active snapshot in review panel

Now that the review panel has side-scroll, we want to make sure that the
active one is displayed on "page load" (since we're using turbolinks,
this concept is kind of vague).
Show indication that the review panel can be scrolled

I put some white-to-transparent shadows on the right and left edges of
the review panel to make it more obvious that it can be scrolled.
Add viewport meta tag

This informs (mostly mobile) browsers to avoid zooming the page out on
page load.
Make buttons on snapshot page look better on mobile

I turns out that a button with only a `.btn` class looks like a button
on desktop. But on my iPhone, it renders without any borders, making it
look like text only. Adding `.btn-default` fixes that.
Add bottom-margin to buttons on snapshot page

These looked good when rendered on desktop. But on a mobile, when they
were stacked on top of one another, there was no margin in between them.
A 5px margin does the trick.
Make navbar collapse on mobile

I started out trying to figure out why the navbar was having content
that was overflowing the window width on mobile. I ended up changing the
menu to a collapsable such. On desktop, it looks the same as before. But
on smaller screens, there is a toggle button to show/hide the menu
content.

This fixes a number of issues with the menu on mobile:

 - It no longer overflows
 - The nav items now have a margin to the left edge
 - The menu was taking up too much space vertically
Make URL titles on project page multi-line

These headers were making the text overflow the window width on mobile.
Prevent URLs in project names from breaking layout

On the projects index page, if you had a project with a URL (or any
other long word) in its name, the text would make the table wider than
the page width, thus breaking the layout.
Remove direct-link to edit project form index page

Editing a project is not a common task, and the option to edit is
already on the project show page. I'm remving the edit icon/link to save
up space and complexity.
Move delete button to project page

Deleting a project should be rare, and can be taken care of from the
project `#show` page instead of from the index page.

While moving, I turned the "Edit" text link into an icon, to be
consistent with the delete icon.