Compact mode for messages

src/gui/Pages/Chat/Timeline/EventContent.qml

@@ -13,9 +13,10 @@ HRowLayout {
 
     readonly property string senderText:
         hideNameLine ? "" : (
-            "<div class='sender'>" +
+            `<${smallAvatar ? "span" : "div"} class='sender'>` +
             utils.coloredNameHtml(model.sender_name, model.sender_id) +
-            "</div>"
+            (smallAvatar ? ": " : "") +
+            (smallAvatar ? "</span>" : "</div>")
         )
     property string contentText: utils.processedEventText(model)
     readonly property string timeText: utils.formatTime(model.date, false)
@@ -60,11 +61,12 @@ HRowLayout {
         opacity: collapseAvatar ? 0 : 1
         visible: ! hideAvatar
 
-        Layout.minimumWidth: theme.chat.message.avatarSize
-        Layout.minimumHeight:
-            collapseAvatar ? 1 :
-            smallAvatar    ? theme.chat.message.collapsedAvatarSize :
-            Layout.minimumWidth
+        Layout.minimumWidth:
+            smallAvatar ?
+            theme.chat.message.collapsedAvatarSize :
+            theme.chat.message.avatarSize
+
+        Layout.minimumHeight: collapseAvatar ? 1 : Layout.minimumWidth
 
         Layout.maximumWidth: Layout.minimumWidth
         Layout.maximumHeight: Layout.minimumHeight
@@ -76,7 +78,7 @@ HRowLayout {
             displayName: model.sender_name
             mxc: model.sender_avatar
             width: parent.width
-            height: collapseAvatar ? 1 : theme.chat.message.avatarSize
+            height: collapseAvatar ? 1 : parent.Layout.minimumWidth
             radius: theme.chat.message.avatarRadius
         }
     }

src/gui/Pages/Chat/Timeline/EventDelegate.qml

@@ -20,6 +20,7 @@ HColumnLayout {
     readonly property var nextModel: eventList.model.get(model.index - 1)
     readonly property QtObject currentModel: model
 
+    property bool compact: window.settings.alwaysUseCompactMode
     property bool isOwn: chat.userId === model.sender_id
     property bool onRight: eventList.ownEventsOnRight && isOwn
     property bool combine: eventList.canCombine(previousModel, model)
@@ -27,10 +28,12 @@ HColumnLayout {
     property bool dayBreak: eventList.canDayBreak(previousModel, model)
 
     readonly property bool smallAvatar:
+        compact || (
             eventList.canCombine(model, nextModel) &&
             (model.event_type === "RoomMessageEmote" ||
              ! (model.event_type.startsWith("RoomMessage") ||
                 model.event_type.startsWith("RoomEncrypted")))
+        )
 
     readonly property bool collapseAvatar: combine
     readonly property bool hideAvatar: onRight