Fix hover/focus chevron on thread summary relying on font character

Author: t3chguy

res/css/views/rooms/_EventTile.scss

@@ -742,40 +742,47 @@ $left-gutter: 64px;
     overflow: hidden;
     border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
 
-    &:hover {
-        cursor: pointer;
-        border-color: $quinary-content;
-    }
-
-    &::before {
-        align-self: center; // v-align the threads icon
-    }
-
-    &::after {
-        content: "›";
+    .mx_ThreadInfo_chevron {
         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);
+        transform: translateX(60px);
         transition: all .1s ease-in-out;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 12px;
+            transform: translateY(-50%);
+            width: 12px;
+            height: 12px;
+            mask-image: url('$(res)/img/compound/chevron-right-12px.svg');
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: $secondary-content;
+        }
     }
 
-    &:hover::after {
-        opacity: 1;
-        transform: translateX(0);
+    &:hover, &:focus {
+        cursor: pointer;
+        border-color: $quinary-content;
+
+        .mx_ThreadInfo_chevron {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    &::before {
+        align-self: center; // v-align the threads icon
     }
 }
 

res/img/compound/chevron-right-12px.svg

@@ -62,6 +62,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => {
                 { countSection }
             </span>
             <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
+            <div className="mx_ThreadInfo_chevron" />
         </AccessibleButton>
     );
 };