From e7ed1c1cfe90466d4c1c2391613eff41fcc86423 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 6 Jun 2017 15:30:38 +0100
Subject: [PATCH] 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  | 10 ++++++++++
 app/templates/views/conversations/conversation.html |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index 41cad421e..0f3b5e0ab 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/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;
+  }
+
+}
diff --git a/app/templates/views/conversations/conversation.html b/app/templates/views/conversations/conversation.html
index 6314de9ed..f18fcc417 100644
--- a/app/templates/views/conversations/conversation.html
+++ b/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 }}