Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into export-conversations

res/css/structures/_RoomStatusBar.scss

@@ -112,7 +112,7 @@ limitations under the License.
 
         .mx_AccessibleButton {
             padding: 5px 10px;
-            padding-left: 28px; // 16px for the icon, 2px margin to text, 10px regular padding
+            padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
             display: inline-block;
             position: relative;
 
@@ -128,13 +128,14 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
+                width: 18px;
+                height: 18px;
+                top: 50%; // text sizes are dynamic
+                transform: translateY(-50%);
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
                 mask-image: url('$(res)/img/element-icons/trashcan.svg');
-                width: 12px;
-                height: 16px;
-                top: calc(50% - 8px); // text sizes are dynamic
             }
 
             &.mx_RoomStatusBar_unsentResendAllBtn {
@@ -142,9 +143,6 @@ limitations under the License.
 
                 &::before {
                     mask-image: url('$(res)/img/element-icons/retry.svg');
-                    width: 18px;
-                    height: 18px;
-                    top: calc(50% - 9px); // text sizes are dynamic
                 }
             }
         }

res/css/views/dialogs/_ForwardDialog.scss

@@ -34,7 +34,7 @@ limitations under the License.
     > .mx_ForwardDialog_preview {
         max-height: 30%;
         flex-shrink: 0;
-        overflow: scroll;
+        overflow-y: auto;
 
         div {
             pointer-events: none;

res/css/views/rooms/_IRCLayout.scss

@@ -29,6 +29,7 @@ $irc-line-height: $font-18px;
         // timestamps are links which shouldn't be underlined
         > a {
             text-decoration: none;
+            min-width: 45px;
         }
 
         display: flex;
@@ -49,18 +50,6 @@ $irc-line-height: $font-18px;
             }
         }
 
-        > .mx_SenderProfile {
-            order: 2;
-            flex-shrink: 0;
-            width: var(--name-width);
-            text-overflow: ellipsis;
-            text-align: left;
-            display: flex;
-            align-items: center;
-            overflow: visible;
-            justify-content: flex-end;
-        }
-
         .mx_EventTile_line, .mx_EventTile_reply {
             padding: 0;
             display: flex;
@@ -173,27 +162,37 @@ $irc-line-height: $font-18px;
         border-left: 0;
     }
 
-    .mx_SenderProfile_hover {
-        background-color: $primary-bg-color;
-        overflow: hidden;
+    .mx_SenderProfile {
+        width: var(--name-width);
         display: flex;
+        order: 2;
+        flex-shrink: 0;
+        justify-content: flex-start;
+        align-items: center;
 
         > .mx_SenderProfile_displayName {
+            width: 100%;
+            text-align: end;
             overflow: hidden;
             text-overflow: ellipsis;
-            min-width: var(--name-width);
-            text-align: end;
+        }
+
+        > .mx_SenderProfile_mxid {
+            visibility: collapse;
         }
     }
 
     .mx_SenderProfile:hover {
-        justify-content: flex-start;
-    }
-
-    .mx_SenderProfile_hover:hover {
         overflow: visible;
-        width: max(auto, 100%);
         z-index: 10;
+
+        > .mx_SenderProfile_displayName {
+            overflow: visible;
+        }
+
+        > .mx_SenderProfile_mxid {
+            visibility: visible;
+        }
     }
 
     .mx_ReplyThread {
@@ -201,16 +200,7 @@ $irc-line-height: $font-18px;
         .mx_SenderProfile {
             width: unset;
             max-width: var(--name-width);
-        }
-
-        .mx_SenderProfile_hover {
             background: transparent;
-
-            > span {
-                > .mx_SenderProfile_displayName {
-                    min-width: inherit;
-                }
-            }
         }
 
         .mx_EventTile_emote {

res/css/views/rooms/_VoiceRecordComposerTile.scss

@@ -36,10 +36,10 @@ limitations under the License.
 }
 
 .mx_VoiceRecordComposerTile_delete {
-    width: 14px; // w&h are size of icon
-    height: 18px;
+    width: 24px;
+    height: 24px;
     vertical-align: middle;
-    margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
+    margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
     background-color: $voice-record-icon-color;
     mask-repeat: no-repeat;
     mask-size: contain;

res/css/views/voice_messages/_PlaybackContainer.scss

@@ -33,9 +33,14 @@ limitations under the License.
     font-size: $font-14px;
     line-height: $font-24px;
 
+    contain: content;
+
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $voice-record-waveform-incomplete-fg-color;
+            height: 100%;
+            /* Variable set by a JS component */
+            transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {
                 // Small animation to remove the mechanical feel of progress