Line up linked message in viewport

We anchor link to the relevant message in a thread. Which is good, but
it leaves the messages hard against the top edge of the viewport. This
looks sloppy. So this commit:

- makes each message focusable
- shifts the focused message with CSS to sit away from the viewport

app/assets/stylesheets/components/sms-message.scss

@@ -63,3 +63,13 @@ $tail-angle: 20deg;
 .sms-message-status-outbound {
   text-align: right;
 }
+
+.sms-message-row {
+
+  &:focus {
+    outline: none;
+    padding-top: 20px;
+    margin-top: -20px;
+  }
+
+}

app/templates/views/conversations/conversation.html

@@ -14,7 +14,7 @@
       </h1>
     </div>
     {% for message in conversation %}
-      <div class="grid-row" id="n{{ message.id }}">
+      <div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
         {% if message.inbound %}
           <div class="column-two-thirds sms-message-inbound">
             {{ message.content | string }}