Enable threads by default and mark it as a beta feature (#8081)

res/css/views/elements/_Tooltip.scss

@@ -16,13 +16,23 @@ limitations under the License.
 */
 
 @keyframes mx_fadein {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes mx_fadeout {
-    from { opacity: 1; }
-    to { opacity: 0; }
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
 }
 
 .mx_Tooltip_chevron {

res/css/views/messages/_MessageActionBar.scss

@@ -48,7 +48,7 @@ limitations under the License.
         cursor: initial;
     }
 
-    > * {
+    >* {
         white-space: nowrap;
         display: inline-block;
         position: relative;
@@ -102,6 +102,11 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/message/thread.svg');
 }
 
+.mx_MessageActionBar_threadButton .mx_Indicator {
+    background: $links;
+    animation-iteration-count: infinite;
+}
+
 .mx_MessageActionBar_editButton::after {
     mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }

res/css/views/right_panel/_ThreadPanel.scss

@@ -17,6 +17,8 @@ limitations under the License.
 .mx_ThreadPanel {
     display: flex;
     flex-direction: column;
+    height: 100px;
+    overflow: visible;
 
     .mx_BaseCard_header {
         margin-bottom: 12px;
@@ -225,6 +227,20 @@ limitations under the License.
             display: none; // hide the hidden event expand button, not enough space, view source can still be used
         }
     }
+
+    .mx_BaseCard_footer {
+        text-align: left;
+        font-size: $font-12px;
+        align-items: center;
+        justify-content: end;
+        gap: 4px;
+        position: relative;
+        top: 2px;
+
+        .mx_AccessibleButton_kind_link_inline {
+            color: $secondary-content;
+        }
+    }
 }
 
 .mx_ThreadPanel_replies {
@@ -269,10 +285,10 @@ limitations under the License.
     align-items: center;
     justify-content: center;
     position: absolute;
-    top: 48px;
-    bottom: 8px;
-    left: 8px;
-    right: 8px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     padding: 20px;
 
     h2 {

res/css/views/rooms/_EventTile.scss

@@ -940,6 +940,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
 .mx_ThreadView {
     display: flex;
     flex-direction: column;
+    max-height: 100%;
 
     .mx_ThreadView_List {
         flex: 1;