Message/EventContent delegates improvements

- Rectangle > Column > Labels instead of ColumnLayout > Labels with
  rectangle backgrounds hack

- Use basic Row and Column instead of Layouts, for simplicity and
  performance

- Get rid of a binding loop that happened sometimes when local echo icon
  disappeared

- Max bubble width when lots of screen space available
  now depends on font size, instead of always being 600

harmonyqml/components/Chat/RoomEventList/EventContent.qml

@@ -3,11 +3,17 @@ import QtQuick.Layouts 1.3
 import "../../Base"
 import "../utils.js" as ChatJS
 
-HRowLayout {
+Row {
     id: eventContent
     spacing: standardSpacing / 2
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
 
+    width: Math.min(
+        roomEventListView.width - avatar.width - eventContent.spacing,
+        HStyle.fontSize.normal * 0.5 * 75,  // 600 with 16px font
+        contentLabel.implicitWidth
+    )
+
     HAvatar {
         id: avatar
         name: displayName
@@ -16,6 +22,8 @@ HRowLayout {
     }
 
     HLabel {
+        width: parent.width
+
         id: contentLabel
         text: "<font color='" +
               Qt.hsla(Backend.hueFromString(displayName.value || dict.sender),
@@ -41,10 +49,5 @@ HRowLayout {
         rightPadding: horizontalPadding
         topPadding: verticalPadding
         bottomPadding: verticalPadding
-
-        Layout.maximumWidth: Math.min(
-            600,
-            roomEventListView.width - avatar.width - eventContent.totalSpacing
-        )
     }
 }

harmonyqml/components/Chat/RoomEventList/MessageContent.qml

@@ -3,27 +3,47 @@ import QtQuick.Layouts 1.3
 import "../../Base"
 
 Row {
-    id: row
+    id: messageContent
     spacing: standardSpacing / 2
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
 
-    HAvatar { id: avatar; hidden: combine; name: displayName }
+    HAvatar {
+        id: avatar
+        hidden: combine
+        name: displayName
+    }
 
-    HColumnLayout {
+    Rectangle {
+        color: HStyle.chat.message.background
+
+        //width: nameLabel.implicitWidth
+        width: Math.min(
+            roomEventListView.width - avatar.width - messageContent.spacing,
+            HStyle.fontSize.normal * 0.5 * 75,  // 600 with 16px font
+            Math.max(
+                nameLabel.visible ? nameLabel.implicitWidth : 0,
+                contentLabel.implicitWidth
+            )
+        )
+        height: nameLabel.height + contentLabel.implicitHeight
+
+        Column {
             spacing: 0
+            anchors.fill: parent
 
             HLabel {
-            visible: ! combine
+                height: combine ? 0 : implicitHeight
+                width: parent.width
+                visible: height > 0
+
                 id: nameLabel
                 text: displayName.value || dict.sender
-            background: Rectangle {color: HStyle.chat.message.background}
                 color: Qt.hsla(Backend.hueFromString(text),
                                HStyle.displayName.saturation,
                                HStyle.displayName.lightness,
                                1)
                 elide: Text.ElideRight
                 maximumLineCount: 1
-            Layout.preferredWidth: contentLabel.width
                 horizontalAlignment: isOwn ? Text.AlignRight : Text.AlignLeft
 
                 leftPadding: horizontalPadding
@@ -32,6 +52,8 @@ Row {
             }
 
             HRichLabel {
+                width: parent.width
+
                 id: contentLabel
                 text: (dict.formatted_body ?
                        Backend.htmlFilter.filter(dict.formatted_body) :
@@ -44,7 +66,6 @@ Row {
                        "&nbsp;<font size=" + HStyle.fontSize.small +
                        "px>⏳</font>" : "")
                 textFormat: Text.RichText
-            background: Rectangle {color: HStyle.chat.message.background}
                 color: HStyle.chat.message.body
                 wrapMode: Text.Wrap
 
@@ -52,11 +73,7 @@ Row {
                 rightPadding: horizontalPadding
                 topPadding: nameLabel.visible ? 0 : verticalPadding
                 bottomPadding: verticalPadding
-
+            }
-            Layout.minimumWidth: nameLabel.implicitWidth
-            Layout.maximumWidth: Math.min(
-                600, roomEventListView.width - avatar.width - row.spacing
-            )
         }
     }
 }