Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (469 commits)
  Feature/add sticker picker
  guard more secure routes
  guard secure routes by redirecting to root
  closest can returns itself as well
  find inside status-content div only
  try to use the closest a tag as target
  Update es.json
  Also apply keyword filter to subjects
  Remove files I accidentally pushed in
  fix issues caused by merges in usersearch on @
  Add user search at
  fix eslint warnings
  remove vue-popperjs
  fix moderation menu partially hidden by usercard boundary
  migrate popper css
  rewrite ModerationTools using v-tooltip
  make popover position for status action dropdow relative to parent node
  rewrite ExtraButtons using v-tooltip
  install v-tooltip
  i18n/Update pedantic Japanese translation
  ...

2 files changed, 28 insertions, 12 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..7d01678b 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
@@ -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>