From 3e23b341687a94e0b5df74447a5e19bbfb59343b Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 22 Apr 2019 21:07:29 +0300
Subject: [PATCH] fix overflow behavior

---
 src/components/avatar_list/avatar_list.vue | 12 ++++++------
 src/components/status/status.vue           | 12 +++---------
 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 fc5abf01eb..b14474bab2 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 d79bb2b963..a9ce722c8e 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;
-    }
   }
 }