fix lint

src/App.scss

@@ -33,6 +33,7 @@ button{
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    box-shadow: 0 0 1px black;
 
     &:hover {
         opacity: 0.8;

src/components/conversation/conversation.js

@@ -11,6 +11,7 @@ const conversation = {
   data () {
     return {
       highlight: null,
+      floatHeading: 0,
       preview: {
         x: 0,
         y: 0,
@@ -40,6 +41,7 @@ const conversation = {
   },
   created () {
     this.fetchConversation()
+    window.onscroll = this.moveHeading
   },
   watch: {
     '$route': 'fetchConversation'
@@ -90,6 +92,25 @@ const conversation = {
       } else {
         this.preview.status = null
       }
+    },
+    moveHeading (e) {
+      const rect = this.$el.getBoundingClientRect()
+      if (rect.bottom - 50 < 50) {
+        this.floatHeading = rect.bottom - rect.top - 50
+        // console.log(this.floatHeading)
+      } else if (rect.top < 50) {
+        this.floatHeading = -rect.top + 50
+        // console.log(this.floatHeading)
+      } else {
+        this.floatHeading = 0
+      }
+    },
+    toggleExpanded () {
+      if (this.floatHeading > 0) {
+        window.scrollBy(0, -this.floatHeading - 200)
+        console.log(this.floatHeading)
+      }
+      this.$emit('toggleExpanded')
     }
   }
 }

src/components/conversation/conversation.vue

@@ -2,9 +2,9 @@
   <div class="timeline panel panel-default base00-background">
     <div class="panel-heading base01-background base04 base03-border conversation-heading">
       Conversation
-      <span v-if="collapsable" style="float:right;">
+      <button v-if="collapsable" :style="{ top: floatHeading + 'px' }" class="collapser base06 base02-background" @click.prevent="toggleExpanded">
-        <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
+        Collapse
-      </span>
+      </button>
     </div>
     <div class="panel-body">
       <div class="timeline">
@@ -30,6 +30,16 @@
   .conversation-heading {
     border-bottom-style: solid;
     border-bottom-width: 1px;
+
+    .collapser {
+      position: relative;
+      float:right;
+      height: 1.8em;
+      line-height: 100%;
+      padding: 0 0.6em 0 0.6em;
+      margin-right: -0.4em;
+      box-shadow: 0 0 1px black;
+    }
   }
 
   .status-preview {