Use typographical quotes in no threads UI (#7713)

res/css/views/right_panel/_ThreadPanel.scss

@@ -106,6 +106,13 @@ limitations under the License.
         padding-right: 16px;
     }
 
+    &.mx_ThreadView .mx_AutoHideScrollbar {
+        /* the scrollbar is 8px wide, and we want a 12px gap with the side of the
+        panel. Hence the magic number, 8+4=12 */
+        width: calc(100% - 4px);
+        padding-right: 4px;
+    }
+
     .mx_RoomView_MessageList {
         padding-left: 12px;
         padding-right: 0;
@@ -182,6 +189,7 @@ limitations under the License.
 
     .mx_MessageTimestamp {
         font-size: $font-12px;
+        color: $secondary-content;
     }
 }
 

res/css/views/rooms/_EventTile.scss

@@ -793,7 +793,7 @@ $left-gutter: 64px;
 .mx_ThreadInfo_threads-amount {
     font-weight: 600;
     position: relative;
-    padding: 0 8px;
+    padding: 0 12px 0 8px;
     white-space: nowrap;
 }
 
@@ -962,7 +962,7 @@ $left-gutter: 64px;
         .mx_RedactedBody,
         .mx_ReplyChain_wrapper {
             margin-left: 36px;
-            margin-right: 50px;
+            margin-right: 8px;
 
             .mx_EventTile_content,
             .mx_HiddenBody,
@@ -974,14 +974,12 @@ $left-gutter: 64px;
 
         .mx_ReactionsRow {
             margin-left: 36px;
-            margin-right: 50px;
+            margin-right: 8px;
         }
 
         .mx_MessageTimestamp {
-            left: auto;
-            right: 2px !important;
-            top: 1px !important;
-            text-align: right;
+            top: 2px !important;
+            width: auto;
         }
 
         .mx_EventTile_senderDetails {