4 files changed, 52 insertions, 26 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 059028f9..89fcfddb 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { find, filter, sortBy } from 'lodash'
+import { reduce, find, filter, sortBy } from 'lodash'
 import { statusType } from '../../modules/statuses.js'
 import Status from '../status/status.vue'
 
@@ -33,6 +33,21 @@ const conversation = {
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
       return sortAndFilterConversation(conversation)
+    },
+    replies () {
+      let i = 1
+      return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
+        const irid = Number(in_reply_to_status_id)
+        if (irid) {
+          result[irid] = result[irid] || []
+          result[irid].push({
+            name: `#${i}`,
+            id: id
+          })
+        }
+        i++
+        return result
+      }, {})
     }
   },
   components: {
@@ -59,18 +74,8 @@ const conversation = {
       }
     },
     getReplies (id) {
-      let res = []
       id = Number(id)
-      let i
-      for (i = 0; i < this.conversation.length; i++) {
-        if (Number(this.conversation[i].in_reply_to_status_id) === id) {
-          res.push({
-            name: `#${i}`,
-            id: this.conversation[i].id
-          })
-        }
-      }
-      return res
+      return this.replies[id] || []
     },
     focused (id) {
       if (this.statusoid.retweeted_status) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index f02ced8d..84dd36fa 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -49,6 +49,10 @@
         color: $green;
       }
 
+      .icon-user-plus.lit {
+        color: $blue;
+      }
+
       .icon-reply.lit {
         color: $blue;
       }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 6c0419a5..c9113bc4 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -36,6 +36,15 @@
               </h1>
               <status :compact="true" :statusoid="notification.status"></status>
             </div>
+            <div v-if="notification.type === 'follow'">
+              <h1>
+                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+                <i class="fa icon-user-plus lit"></i>
+              </h1>
+              <div>
+                <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{ notification.action.user.screen_name }}</router-link> followed you
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 1c044f9a..7e60cb9d 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -8,8 +8,10 @@
         <div class='container'>
           <img :src="user.profile_image_url">
           <span class="glyphicon glyphicon-user"></span>
-          <div class='user-name'>{{user.name}}</div>
-          <div class='user-screen-name'>@{{user.screen_name}}</div>
+          <div class="name-and-screen-name">
+            <div class='user-name'>{{user.name}}</div>
+            <div class='user-screen-name'>@{{user.screen_name}}</div>
+          </div>
         </div>
         <div v-if="isOtherUser" class="user-interactions">
           <div v-if="user.follows_you && loggedIn" class="following base06">
@@ -124,6 +126,8 @@
 .profile-panel-body {
   top: -0em;
   padding-top: 4em;
+
+  word-wrap: break-word;
 }
 
 .user-info {
@@ -143,33 +147,37 @@
     align-content: flex-start;
     justify-content: center;
     max-height: 60px;
+    overflow: hidden;
   }
 
   img {
-      border: 2px solid;
-      border-radius: 5px;
-      flex: 1 0 100%;
-      max-width: 48px;
-      max-height: 48px;
+    border: 2px solid;
+    border-radius: 5px;
+    flex: 1 0 100%;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
   }
 
 	text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
 
-	.user-name{
-		margin-top: 0.0em;
+  .name-and-screen-name {
+    display: block;
+    margin-top: 0.0em;
     margin-left: 0.6em;
-    flex: 0 0 auto;
-    align-self: flex-start;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+	.user-name{
 	}
 
   .user-screen-name {
-      margin-top: 0.0em;
-      margin-left: 0.6em;
       font-weight: lighter;
       font-size: 15px;
       padding-right: 0.1em;
       flex: 0 0 auto;
-      align-self: flex-start;
   }
 
   .user-interactions {