Review: user-teasers as unordered list

webapp/assets/_new/styles/tokens.scss

@@ -230,6 +230,7 @@ $space-small: 16px;
 $space-x-small: 8px;
 $space-xx-small: 4px;
 $space-xxx-small: 2px;
+$space-none: 0;
 
 /**
  * @tokens Size Height

webapp/components/features/FollowList/FollowList.spec.js

@@ -137,8 +137,8 @@ describe('FollowList.vue', () => {
           expect(wrapper.findAll('.user-teaser')).toHaveLength(allConnectionsUser.followingCount)
         })
 
-        it('renders the user-teasers in an overflow-container', () => {
-          expect(wrapper.find('.--overflow').is('div')).toBe(true)
+        it('renders the user-teasers as an overflowing list', () => {
+          expect(wrapper.find('.--overflow').is('ul')).toBe(true)
         })
 
         it('renders a filter text input', () => {

webapp/components/features/FollowList/FollowList.vue

@@ -4,14 +4,15 @@
       <h5 class="title spacer-x-small">
         {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
       </h5>
-      <div :class="connectionsClass">
-        <user-teaser
+      <ul :class="connectionsClass">
+        <li
           v-for="connection in filteredConnections"
           :key="connection.id"
-          :user="connection"
-          class="spacer-x-small"
-        />
-      </div>
+          class="connections__item"
+        >
+          <user-teaser :user="connection" />
+        </li>
+      </ul>
       <base-button
         v-if="hasMore"
         :loading="loading"
@@ -135,10 +136,21 @@ export default {
 
   .connections {
     height: $size-height-connections;
+    padding: $space-none;
+    list-style-type: none;
 
     &.--overflow {
       overflow-y: auto;
     }
+
+    > .connections__item {
+      padding: $space-xx-small;
+
+      &.is-selected,
+      &:hover {
+        background-color: $background-color-primary-inverse;
+      }
+    }
   }
 
   .nobody-message {
@@ -149,9 +161,5 @@ export default {
   > :nth-child(n):not(:last-child) {
     margin-bottom: $space-small;
   }
-
-  .user-teaser {
-    margin-bottom: $space-x-small;
-  }
 }
 </style>