alignment fixes

src/components/notifications/notifications.scss

@@ -36,6 +36,8 @@
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
+  word-wrap: break-word;
+  word-break: break-word;
 
   &:hover .animated.avatar {
     canvas {
@@ -46,10 +48,6 @@
     }
   }
 
-  .muted {
-    padding: .25em .6em;
-  }
-
   .non-mention {
     display: flex;
     flex: 1;

src/components/status/status.vue

@@ -17,7 +17,7 @@
     </div>
     <template v-if="muted && !isPreview">
       <div class="media status container muted">
-        <small>
+        <small class="username">
           <i
             v-if="muted && retweet"
             class="button-icon icon-retweet"
@@ -27,18 +27,23 @@
           </router-link>
         </small>
         <small
-          v-if="showReasonMutedThread && muteWordHits.length === 0"
+          v-if="showReasonMutedThread"
-          class="muted-thread"
+          class="mute-thread"
         >
           {{ $t('status.thread_muted') }}
         </small>
         <small
           v-if="showReasonMutedThread && muteWordHits.length > 0"
-          class="muted-Thread"
+          class="mute-thread"
         >
           {{ $t('status.thread_muted_and_words') }}
         </small>
-        <small class="mute-words">{{ muteWordHits.join(', ') }}</small>
+        <small
+          class="mute-words"
+          :title="muteWordHits.join(', ')"
+        >
+          {{ muteWordHits.join(', ') }}
+        </small>
         <a
           href="#"
           class="unmute"
@@ -653,20 +658,49 @@ $status-margin: 0.75em;
 }
 
 .muted {
-  padding: 0.25em 0.5em;
+  padding: .25em .6em;
-  button {
+  height: 1.2em;
+  line-height: 1.2em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+
+  .username, .mute-thread, .mute-words {
+    word-wrap: normal;
+    word-break: normal;
+    white-space: nowrap;
+  }
+
+  .username, .mute-words {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .username {
+    flex: 0 1 auto;
+    margin-right: .2em;
+  }
+
+  .mute-thread {
+    flex: 0 0 auto;
+  }
+
+  .mute-words {
+    flex: 1 0 5em;
+    margin-left: .2em;
+    &::before {
+      content: ' '
+    }
+  }
+
+  .unmute {
+    flex: 0 0 auto;
     margin-left: auto;
-  }
-
-  .muted-thread, .mute-words {
-    margin-left: 10px;
-  }
-}
-
-a.unmute {
     display: block;
     margin-left: auto;
   }
+}
 
 .reply-body {
   flex: 1;

src/i18n/en.json

@@ -622,8 +622,8 @@
     "unmute_conversation": "Unmute conversation",
     "status_unavailable": "Status unavailable",
     "copy_link": "Copy link to status",
-    "thread_muted": "Conversation muted",
+    "thread_muted": "Thread muted",
-    "thread_muted_and_words": "Conversation muted, contains filtered words:"
+    "thread_muted_and_words": ", has words:"
   },
   "user_card": {
     "approve": "Approve",