2 files changed, 29 insertions, 13 deletions
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index a56a27ea..dcb56106 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -13,7 +13,7 @@ function showWhoToFollow (panel, reply) {
     toFollow.img = img
     toFollow.name = name
 
-    panel.$store.state.api.backendInteractor.externalProfile(name)
+    panel.$store.state.api.backendInteractor.fetchUser({ id: name })
       .then((externalUser) => {
         if (!externalUser.error) {
           panel.$store.commit('addNewUsers', [externalUser])
@@ -29,7 +29,7 @@ function getWhoToFollow (panel) {
     panel.usersToFollow.forEach(toFollow => {
       toFollow.name = 'Loading...'
     })
-    apiService.suggestions({credentials: credentials})
+    apiService.suggestions({ credentials: credentials })
       .then((reply) => {
         showWhoToFollow(panel, reply)
       })
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 25e3a9f6..518acd97 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -3,17 +3,25 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          {{$t('who_to_follow.who_to_follow')}}
+          {{ $t('who_to_follow.who_to_follow') }}
         </div>
       </div>
-      <div class="panel-body who-to-follow">
-        <span v-for="user in usersToFollow">
-          <img v-bind:src="user.img" />
-            <router-link v-bind:to="userProfileLink(user.id, user.name)">
-              {{user.name}}
-            </router-link><br />
-        </span>
-        <img v-bind:src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">{{$t('who_to_follow.more')}}</router-link>
+      <div class="who-to-follow">
+        <p
+          v-for="user in usersToFollow"
+          :key="user.id"
+          class="who-to-follow-items"
+        >
+          <img :src="user.img">
+          <router-link :to="userProfileLink(user.id, user.name)">
+            {{ user.name }}
+          </router-link><br>
+        </p>
+        <p class="who-to-follow-more">
+          <router-link :to="{ name: 'who-to-follow' }">
+            {{ $t('who_to_follow.more') }}
+          </router-link>
+        </p>
       </div>
     </div>
   </div>
@@ -30,11 +38,19 @@
     height: 32px;
   }
   .who-to-follow {
-    padding: 0.5em 1em 0.5em 1em;
+    padding: 0em 1em;
     margin: 0px;
-    line-height: 40px;
+  }
+  .who-to-follow-items {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding: 0px;
+    margin: 1em 0em;
+  }
+  .who-to-follow-more {
+    padding: 0px;
+    margin: 1em 0em;
+    text-align: center;
   }
 </style>