Collapsable toots [1/??] ☕️

app/javascript/styles/components.scss

@@ -459,6 +459,7 @@
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: pre-wrap;
 
   .emojione {
@@ -542,8 +543,10 @@
   padding: 8px 10px;
   padding-left: 68px;
   position: relative;
+  height: auto;
   min-height: 48px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
+  overflow: hidden;
   cursor: default;
 
   @keyframes fade {
@@ -598,6 +601,14 @@
       }
     }
   }
+
+  &.status-collapsed {
+    height: 48px;
+
+    .status__content {
+      height: 20px;
+    }
+  }
 }
 
 .notification-favourite {
@@ -611,8 +622,8 @@
 }
 
 .status__relative-time {
+  margin-left: auto;
   color: lighten($ui-base-color, 26%);
-  float: right;
   font-size: 14px;
 }
 
@@ -628,6 +639,11 @@
 
 .status__info {
   font-size: 15px;
+  line-height: 28px;
+}
+
+.status__collapse-button {
+  float: right;
 }
 
 .status-check-box {