fix overflow behavior

2 files changed, 9 insertions, 15 deletions

diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index fc5abf01..b14474ba 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -1,9 +1,9 @@
 <template>
-  <ul class="avatars">
-      <li class="avatars-item" v-for="avatar in slicedAvatars">
+  <div class="avatars">
+      <div class="avatars-item" v-for="avatar in slicedAvatars">
         <UserAvatar :src="avatar.profile_image_url" class="avatar-small" />
-      </li>
-  </ul>
+      </div>
+  </div>
 </template>
 
 <script src="./avatar_list.js" ></script>
@@ -20,11 +20,11 @@
   flex-wrap: wrap;
   height: 24px;
 
-  li.avatars-item {
+  .avatars-item {
     margin: 0 0 5px 5px;
 
     &:first-child {
-      padding-left: 10px;
+      padding-left: 5px;
     }
 
     .avatar-small {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d79bb2b9..a9ce722c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -639,15 +639,13 @@ a.unmute {
     line-height: 1em;
 
     .stat-count {
-      margin-right: 0.8em;
+      margin-right: $status-margin;
 
       .stat-title {
         color: var(--faint, $fallback--faint);
         font-size: 12px;
         text-transform: uppercase;
         position: relative;
-        margin-bottom: 3px;
-        line-height: 1em;
       }
 
       .stat-number {
@@ -661,6 +659,8 @@ a.unmute {
       flex: 1;
       overflow: hidden;
       position: relative;
+      display: flex;
+      align-items: center;
 
       &::before {
         content: '';
@@ -671,12 +671,6 @@ a.unmute {
         background-color: var(--faint, $fallback--faint);
       }
     }
-
-    li {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
   }
 }