Fixes following threads design implementation review (#7100)

res/css/views/rooms/_EventTile.scss

@@ -460,6 +460,16 @@ $left-gutter: 64px;
     }
 }
 
+.mx_EventTile_clamp {
+    .mx_EventTile_body {
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+    }
+}
+
 .mx_EventTile_content .markdown-body {
     font-family: inherit !important;
     white-space: normal !important;
@@ -663,7 +673,10 @@ $left-gutter: 64px;
 }
 
 .mx_ThreadInfo {
-    height: 35px;
+    min-width: 267px;
+    max-width: min(calc(100% - 64px), 600px);
+    width: auto;
+    height: 40px;
     position: relative;
     background-color: $system;
     padding-left: 12px;
@@ -671,13 +684,13 @@ $left-gutter: 64px;
     align-items: center;
     border-radius: 8px;
     padding-right: 16px;
-    padding-top: 8px;
-    padding-bottom: 8px;
+    margin-top: 8px;
     font-size: $font-12px;
     color: $secondary-content;
     box-sizing: border-box;
     justify-content: flex-start;
     clear: both;
+    overflow: hidden;
 
     &:hover {
         cursor: pointer;
@@ -687,6 +700,44 @@ $left-gutter: 64px;
         padding-left: 11px;
         padding-right: 15px;
     }
+
+    &::before {
+        content: "";
+        mask-image: url('$(res)/img/element-icons/thread-summary.svg');
+        mask-position: center;
+        height: 18px;
+        min-width: 18px;
+        background-color: $secondary-content;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+    }
+
+    &::after {
+        content: "›";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 60px;
+        padding: 0 10px;
+        font-size: 15px;
+        line-height: 39px;
+        box-sizing: border-box;
+
+        text-align: right;
+        font-weight: 600;
+
+        background: linear-gradient(270deg, $system 52.6%, transparent 100%);
+
+        opacity: 0;
+        transform: translateX(20px);
+        transition: all .1s ease-in-out;
+    }
+
+    &:hover::after {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
 .mx_ThreadInfo_content {
@@ -703,15 +754,6 @@ $left-gutter: 64px;
     float: left;
 }
 
-.mx_ThreadInfo_thread-icon {
-    mask-image: url('$(res)/img/element-icons/thread-summary.svg');
-    mask-position: center;
-    height: 16px;
-    min-width: 16px;
-    background-color: $secondary-content;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-}
 .mx_ThreadInfo_threads-amount {
     font-weight: 600;
     position: relative;
@@ -720,10 +762,10 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile[data-shape=thread_list] {
-    --topOffset: 24px;
+    --topOffset: 20px;
     --leftOffset: 46px;
 
-    margin: var(--topOffset) 0;
+    margin: var(--topOffset) 16px var(--topOffset) 0;
     border-radius: 8px;
 
     &:hover {
@@ -819,6 +861,7 @@ $left-gutter: 64px;
             left: auto;
             right: 2px !important;
             top: 1px !important;
+            font-size: 1rem;
         }
 
         .mx_ReactionsRow {
@@ -830,7 +873,8 @@ $left-gutter: 64px;
         }
     }
 
-    .mx_EventTile_content {
+    .mx_EventTile_content,
+    .mx_RedactedBody {
         margin-left: 36px;
         margin-right: 50px;
     }